{% extends "base.html" %}

{% block content %}
    <ol class="breadcrumb">
        <li><a href="/item/">Everything</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>
        <small class="pull-right"><a href="{% url 'admin:storage_item_change' item.pk %}"><span class="glyphicon glyphicon-pencil"></span></a></small>
        {{ item.name }} <small>{{ item.pk }}</small>
    </h2>
    <div class="row">
        <div class="col-md-4">
            <h3>Details</h3>
            <table class="table table-hover table-striped">
                {% if item.owner %}
                <tr><td>owner</td><td>{{ item.owner }}</td></tr>
                {% endif %}

                <tr><td>state</td><td>{{ item.state }}</td></tr>
                {% 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 %}
            </table>

            <h3>Properties</h3>
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>key</th>
                        <th>value</th>
                    </tr>
                </thead>
                {% for k, v in item.props.items %}
                <tr><td>{{ k }}</td><td>{{ v|urlize }}</td></tr>
                {% empty %}
                <tr><td colspan=2>No properties</td></tr>
                {% endfor %}
            </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 labels %}
            <h3>Labels</h3>
            {% for label in labels %}
                <span class="label label-default">{{ label.id }} <small>({{ label.revision }})</small></span>
            {% endfor %}
            {% endif %}
        </div>

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

            <h3>Children</h3>
            <table class="table table-striped table-hover">
            {% for child in children|dictsort:"name" %}
                <tr><td><a href="{{ child.get_absolute_url }}">{{ child.name }}</a></td></tr>
                {% empty %}
                <tr><td colspan=2>No children</td></tr>
            {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}