{% extends 'base.html' %}
{% load filter_fields %}

{% 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 }} - Settings{% 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 settings</h3>

            <form method="POST" action="{% url 'admin:category_settings' category.project.id category.id %}" novalidate>
                {% csrf_token %}

                <div class="form-group">
                    <label for="name" class="control-label">Name (required)</label>
                    <input type="text" class="form-control input-lg" id="name" name="name" maxlength="100" value="{{ category.name }}" required />
                </div>

                <div class="form-group">
                    <label for="description" class="control-label">Description</label>
                    <textarea class="form-control input-lg" rows="5" id="description" name="description">{{ category.description }}</textarea>
                </div>

                <div class="form-group">
                    <label for="display_field" class="control-label">Display field</label>

                    {% with fields=category.fields.all %}
                        {% if fields %}
                            <select name="display_field" class="form-control input-lg">
                                {% for field in fields %}
                                <option value="{{ field.id }}" {% if category.display_field.id == field.id%}selected{% endif %}>{{ field.name }}</option>
                                {% endfor %}
                            </select>
                        {% else %}
                            <p class="form-control-static">No fields have been added to the category. <a href="{% url 'admin:category_field_create' category.project.id category.id %}">Add a field</a> to make it the display field for this category.</p>
                        {% endif %}
                    {% endwith %}
                </div>

                <div class="form-group">
                    <label for="expiry_field" class="control-label">Expiry field</label>

                    {% with fields=category.fields.all|only_fields:'Date and Time, Date' %}
                        {% if fields %}
                            <select name="expiry_field" class="form-control input-lg">
                                <option value=""></option>
                                {% for field in fields %}
                                <option value="{{ field.id }}" {% if category.expiry_field.id == field.id%}selected{% endif %}>{{ field.name }}</option>
                                {% endfor %}
                            </select>
                        {% else %}
                            <p class="form-control-static">No date fields have been added to the category. <a href="{% url 'admin:category_field_create' category.project.id category.id %}">Add a date field</a> to make it the expiry field for this category.</p>
                        {% endif %}
                    {% endwith %}
                </div>

                <div class="form-group">
                    <label for="description" class="control-label">Default status for new contributions</label>

                    <div class="radio">
                        <label>
                            <input type="radio" name="default_status" value="pending" {% if category.default_status == 'pending' %}checked{% endif %}>
                            <strong>Pending</strong>
                            <p>A new contribution of this category will not appear on the map immediately. A moderate has to approve new contributions first.</p>
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="default_status" value="active" {% if category.default_status == 'active' %}checked{% endif %}>
                            <strong>Active</strong>
                            <p>A new contribution will appear on the map immediately.</p>
                        </label>
                    </div>
                </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 class="row">
        <div class="col-sm-8 col-sm-offset-4">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h2 class="panel-title">Be careful!</h2>
                </div>

                <div class="panel-body becareful">
                    <div class="toggle-active {% if category.status == status_types.inactive %} hidden{% endif %}">
                        <strong>Make this category inactive</strong>
                        <p>The category will no longer be available for data contribution.</p>
                        <a href="#" class="text-danger" data-toggle="modal" data-target="#make-inactive-confirm">Make inactive</a>
                    </div>

                    <div class="toggle-active {% if category.status == status_types.active %} hidden{% endif %}">
                        <strong>Make this category active</strong>
                        <p>The category will be available for data contribution again.</p>
                        <a href="#" class="text-danger" data-toggle="modal" data-target="#make-active-confirm">Make active</a>
                    </div>

                    {% if not project.islocked %}
                        <div>
                            <strong>Delete category</strong>
                            <p>Deleting a category cannot be undone.</p>
                            <a href="#" class="text-danger" data-toggle="modal" data-target="#delete-confirm">Delete this category</a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block modals %}
<div role="dialog" class="modal fade" id="make-inactive-confirm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content panel-warning">
            <div class="modal-header panel-heading">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Are you sure?</h4>
            </div>

            <div class="modal-body panel-body">
                <p><strong>Before you make the category inactive, please read through the consequences of this action:</strong></p>

                <ul>
                    <li>Users will not be able to contribute new data using this category.</li>
                    <li>However, data already contributed using this contribution type can be edited and the input will be validated against the category.</li>
                </ul>
            </div>

            <div class="modal-footer panel-footer">
                <button type="button" name="confirm" value="{{ status_types.inactive }}" class="btn btn-warning" data-loading-text="Loading...">Yes, make the category inactive</button>
            </div>
        </div>
    </div>
</div>

<div role="dialog" class="modal fade" id="make-active-confirm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content panel-warning">
            <div class="modal-header panel-heading">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Are you sure?</h4>
            </div>

            <div class="modal-body panel-body">
                <p><strong>Before you make the category active, please read through the consequences of this action:</strong></p>

                <ul>
                    <li>The category can be used for data contribution and validation.</li>
                </ul>
            </div>

            <div class="modal-footer panel-footer">
                <button type="button" name="confirm" value="{{ status_types.active }}" class="btn btn-warning" data-loading-text="Loading...">Yes, make the category active</button>
            </div>
        </div>
    </div>
</div>

<div role="dialog" class="modal fade" id="delete-confirm" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content panel-danger">
            <div class="modal-header panel-heading">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Are you sure?</h4>
            </div>

            <div class="modal-body panel-body">
                <p><strong>Before you delete the category, please read through the consequences of this action:</strong></p>

                <ul>
                    <li>Deleting a category cannot be undone.</li>
                    {% if num_contributions > 0 %}<li>All data contributed using this category (<strong>{{ num_contributions }}</strong> in total) will be deleted as well.</li>{% endif %}
                </ul>
            </div>

            <div class="modal-footer panel-footer">
                <a href="{% url 'admin:category_delete' category.project.id category.id %}" class="btn btn-danger">I'm absolutely sure, delete the category!</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block libraries %}
<script src="/static/js/admin.ui.updater.js"></script>
<script src="/static/js/admin.ui.forms.validate.js"></script>
<script src="/static/js/admin.control.ajax.js"></script>
{% endblock %}
