{% extends 'base.html' %}

{% block bodydata %}
data-project-id="{{ project.id }}"
data-project-locked="{{ project.islocked }}"
data-category-id="{{ category.id }}"
{% endblock %}

{% block title %} | Project: {{ project.name }} - Category: {{ category.name }} - Overview{% endblock %}

{% block main %}
<div class="page-header">
    <div class="container">
        <h1 class="smaller">
            {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
            <a href="{% url 'admin:project_overview' project.id %}">{{ project.name }}</a>
        </h1>

        {% include 'projects/navigation.html' %}
    </div>
</div>

<div class="container">
    {% include 'snippets/messages.html' %}

    <div class="row">
        <div class="col-sm-4">
            {% include 'categories/category_navigation.html' %}
        </div>

        {% with fields=category.fields.all %}
            <div class="col-sm-8">
                <h3 class="header">
                    {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                    <span>Category fields</span>

                    {% if fields and not project.islocked %}
                        <a href="{% url 'admin:category_field_create' category.project.id category.id %}" class="btn btn-success btn-sm pull-right">
                            <span class="glyphicon glyphicon-plus"></span>
                            <span>Create new field</span>
                        </a>
                    {% endif %}
                </h3>

                {% if project.islocked %}
                    <div class="alert alert-info">
                        <p>The project is locked, therefore category fields cannot be edited. If you wish to edit them, you have to unlock the project in the <a href="{% url 'admin:project_settings' project.id %}"><strong>project settings</strong></a> first.</p>
                    </div>
                {% endif %}

                {% for field in fields %}
                    {% if forloop.first %}
                        <ul id="sortable" class="list-unstyled overview-list">
                    {% endif %}

                    <li class="sort-item" data-item-id="{{ field.id }}">
                        <h4>
                            <small><span class="glyphicon glyphicon-sort"></span></small>
                            {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                            <a href="{% url 'admin:category_field_settings' category.project.id category.id field.id %}">{{ field.name }}</a>
                            {% if field.status == 'inactive' %}<small><span class="label label-default">Inactive</span></small>{% endif %}
                        </h4>

                        {% if field.description %}<p>{{ field.description }}</p>{% endif %}
                        <p class="meta"><strong>Key:</strong> {{ field.key }} &mdash; <strong>Type:</strong> {{ field.type_name }}</p>
                    </li>

                    {% if forloop.last %}
                        </ul>
                    {% endif %}
                {% empty %}
                    <div class="well empty-list">
                        <p class="lead">We couldn't find any fields for this category.</p>

                        {% if project.islocked %}
                            <p>Unfortunately, you cannot create new fields when the project is locked.</p>
                        {% else %}
                            <a href="{% url 'admin:category_field_create' category.project.id category.id %}" class="btn btn-success btn-lg">Create new field</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endwith %}
    </div>
</div>
{% endblock %}

{% block libraries %}
<script src="/static/lib/jquery/jquery-ui.min.js"></script>

<script src="/static/js/admin.ui.sort.js"></script>
<script src="/static/js/admin.control.ajax.js"></script>
{% endblock %}
