{% extends "base.html" %}
{% load static %}
{% load formatstring %}

{% block title %}Distributor: {{ distributor }}{% endblock %}

{% block header_bar %}
    <a href="{% url 'distributor-list' %}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
    Distributor: {{ distributor.name }}
    <span class="small">{{ distributor.description }}</span></h2>
{% endblock %}

{% block header_icons %}
    {% if user.is_staff %}
        <li>
            <a href="{% url "admin:inventory_distributor_change" object_id=distributor.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
        </li>
    {% endif %}
{% endblock %}

{% block content %}
    <table class="attribute-list">
        <tbody>
            <tr>
                <th>Name</th>
                <td>{{ distributor.name }}</td>
            </tr>
            <tr>
                <th>Description</th>
                <td>{{ distributor.description }}</td>
            </tr>
        {% if distributor.icon %}
            <tr>
                <th>Icon</th>
                <td><img src="{{ distributor.icon.url }}" title="{{ distributor.name }}" style="max-height: 20px;"></td>
            </tr>
        {% endif %}
        <tr>
            <th>Link</th>
            <td>{% if distributor.web_link %}<a href="{{ distributor.web_link }}" title="{{ distributor.name }}">{{ distributor.web_link }}{% else %}-{% endif %}</td>
        </tr>
        {% if distributor.search_link %}
        <tr>
            <th>Search</th>
            <td>
                <script>
                    function distro_search(e) {
                        const input = document.getElementById('distributor_search');
                        const link = '{{ distributor.search_link }}'.replace('{}', encodeURIComponent(input.value)).replace('{0}', encodeURIComponent(input.value));
                        window.location.href = link;
                        e = e || window.event;
                        e.preventDefault();
                    }
                </script>
                <form>
                    <label for="distributor_search">Search query:</label>
                    <input name="distributor_search" id="distributor_search" type="text">
                    <button onclick="distro_search(event)" type="submit">Search</button>
                </form>
            </td>
        </tr>
        {% endif %}
        {% if distributor.phone %}
        <tr>
            <th>Phone</th>
            <td>{{ distributor.phone }}</td>
        </tr>
        {% endif %}        
        {% if distributor.email %}
        <tr>
            <th>Email</th>
            <td><a href="mailto:{{ distributor.email }}">{{ distributor.email }}</a></td>
        </tr>
        {% endif %}        

        <tr>
            <th>Tags</th>
            <td>
                <ul class="tag-list">
                    {% for tag in distributor.tags.all %}
                        <li><a href="{% url 'tag-detail' tag.id %}" title="{{ tag.name }}">{{ tag.name }}</a></li>
                    {% empty %}
                        No tags
                    {% endfor %}
                </ul>
            </td>
        </tr>

            <tr><th>Created at</th><td>{{ distributor.created_at }}</td></tr>
        {% if distributor.created_at != distributor.changed_at %}
            <tr><th>Last change</th><td>{{ distributor.changed_at }}</td></tr>
        {% endif %}
        </tbody>
    </table>

    <h2>Items</h2>

    {% url 'distributor-detail' distributor.id as this_url %}
    {% include "inventory/pagination.html" with url=this_url id="paginator_top" param="item" paginator=items %}
    {% include "inventory/item_list.html" with items=items show_manufacturer=1 %}
    {% include "inventory/pagination.html" with url=this_url id="paginator_top" param="item" paginator=items %}

{% endblock %}