{% 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 }} - Display{% 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>

        <div class="col-sm-8">
            <h3 class="header">Category display</h3>

            <form method="POST" action="{% url 'admin:category_display' category.project.id category.id %}" enctype="multipart/form-data" novalidate>
                {% csrf_token %}

                <input type="hidden" name="clear-symbol" id="symbol-clear" value="false">

                <div class="form-group">
                    <label for="colour" class="control-label">Colour</label>
                    <div class="input-group" id="colour">
                        <input type="text" name="colour" value="{{ category.colour }}" class="form-control" />
                        <span class="input-group-addon"><i></i></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="symbol" class="control-label">Symbol</label>
                    <input type="file" id="symbol" name="symbol" data-target="symbol" {% if category.symbol %}data-preview="{{ category.symbol.url }}"{% endif %} />
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="reset" class="btn btn-primary btn-link">Reset</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block libraries %}
<link rel="stylesheet" href="/static/lib/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<script src="/static/lib/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<link rel="stylesheet" href="/static/lib/bootstrap-fileinput/css/bootstrap-fileinput.min.css">
<script src="/static/lib/bootstrap-fileinput/js/bootstrap-fileinput.min.js"></script>

<script src="/static/js/admin.ui.fileinput.js"></script>
<script src="/static/js/admin.ui.forms.validate.js"></script>
<script src="/static/js/admin.ui.category.display.js"></script>
{% endblock %}
