{% extends "issues/device.html" %}
{% load i18n %}

{% block main %}
<h2>{% trans "Mac" %}</h2>
<p>{% trans "Choose your Mac" %}</p>
<div class="devices">
    <div class="row">
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'mac' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbook.png"/>
                <div>{% trans "MacBook" %}</div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'ipod' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbookpro.png"/>
                <div>{% trans "MacBook Pro" %}</div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'iphone' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbookair.png"/>
                <div>{% trans "MacBook Air" %}</div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'ipad' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/imac.png"/>
                <div>{% trans "iMac" %}</div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'ipad' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macpro.jpg"/>
                <div>{% trans "Mac Pro" %}</div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="{% url 'issues-details' 'ipad' %}">
                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macmini.png"/>
                <div>{% trans "Mac mini" %}</div>
            </a>
        </div>
    </div>
</div>    
{% endblock main %}