{% extends "base.html" %}

{% block content %}
    <ol class="breadcrumb">
        <li><a href="/item/">All</a></li>
        {% for ancestor in ancestors %}
            <li><a href="{{ ancestor.get_absolute_url }}">{{ ancestor.name }}</a></li>
        {% endfor %}
        <li class="active">{{ item.name }}</li>
    </ol>
    <h2>
        {% include "widgets/categoryicon.html" with category=item.primary_category %}
        {{ item.name }}
    </h2>
    <div class="row">
        <div class="col-md-4">

            <iframe name="printframe" style="display: none"></iframe>

            <div class="btn-group" role="group" style="margin-bottom: 10px">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="glyphicon glyphicon-print"></i>&nbsp;&nbsp;Print labels <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><div style="padding: 5px 10px">Put one label in front, one on the back!</div></li>
                        <li role="separator" class="divider"></li>
                        <li style="padding: 5px 10px">
                            <form action="/api/1/items/{{ item.short_id }}/print/?quantity=2" method="POST" target="printframe" style="display:inline-block">
                                {% csrf_token %}
                                <button class="btn btn-default btn-lg">Print 2 labels (recommended)</button>
                            </form>
                        </li>
                        <li style="padding: 5px 10px">
                            <form action="/api/1/items/{{ item.short_id }}/print/" method="POST" target="printframe" style="display:inline-block">
                                {% csrf_token %}
                                <button class="btn btn-default btn-lg">Print 1 label</button>
                            </form>
                        </li>
                    </ul>
                </div>
                <a href="{% url 'admin:storage_item_change' item.pk %}" class="btn btn-default">Edit</a>
            </div>

            <table class="table table-hover table-striped">
                {% if item.owner %}
                <tr><td>owner</td><td>{{ item.owner }}</td></tr>
                {% endif %}

                {% if item.state != "present" %}
                <tr><td>state</td><td>{{ item.state }}</td></tr>
                {% endif %}
                {% if item.taken_by %}
                <tr><td>taken by</td><td>{{ item.taken_by }}</td></tr>
                {% endif %}

                {% if item.taken_on %}
                <tr><td>taken on</td><td>{{ item.taken_on }}</td></tr>
                {% endif %}

                {% if item.taken_until %}
                <tr><td>taken until</td><td>{{ item.taken_until }}</td></tr>
                {% endif %}

                <!-- no one cares, except for dev? -->
                <!-- <tr><td>pk</td><td><small>{{ item.pk }}</small></td></tr> -->
                <!-- <tr><td>short_id</td><td><small>{{ item.short_id }}</small></td></tr> -->

                {% for category in categories %}
                <tr>
                <td>
                    category
                </td>
                <td>
                    {% include "widgets/categoryicon.html" with category=category %}
                    <span style="padding-top: 1rem; padding-left: 10px">{{ category.name }}</span>
                </td>
                </tr>
                {% endfor %}

                {% for k, v in item.props.items %}
                <tr><td>{{ k }}</td><td>{{ v|urlize }}</td></tr>
                {% endfor %}

                {% if labels %}
                <tr><td>legacy labels</td><td>
                    {% for label in labels %}
                    <code>{{ label.id }}</code>,
                    {% endfor %}
                </td></tr>
                {% endif %}
            </table>

            {% if images %}
            <h3>Photos</h3>
            <div class="row">
                {% for image in images %}
                <div class="col-md-6">
                    <a href="{{ image.image.url }}">
                        <img src="{{ image.image.url }}" class="img-responsive img-thumbnail" />
                    </a>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% if history %}
            <div class="row" style="margin-top: 20px">
                <div class="col-md-6">
                <a class="btn btn-default btn-sm" data-toggle="collapse" data-target="#hs-item-history" >Toggle changes</a>
            </div>
            </div>
            <div id="hs-item-history" class="collapse">
            <h3>Changes</h3>
            <table class="table table-striped table-hover">
            {% for entry in history %}
                <tr>
                    <td class="{% if entry.is_addition %}text-success{% endif %}">
                        <b>{{ entry.user }}</b>
                    <small>@ {{ entry.action_time }}</small><br />
                    {{ entry.get_change_message }}</td>
                </tr>
            {% endfor %}
            </table>
            </div>
            {% endif %}
        </div>

        <div class="col-md-8">
            {% if item.description %}
            {% load md2 %}
            {{ item.description|markdown:"code-color" }}
            {% endif %}

            <h3>What's inside?</h3>
            {% include "widgets/itemlist.html" with list=children|dictsort:"name" item=item %}
        </div>
    </div>
{% endblock %}