{% extends "base.html" %}

{% block bodydata %} data-project-id="{{category.project.id}}" data-category-id="{{category.id}}"{% endblock %}
{% block title %} | Category: {{ category.name }}{% endblock %}

{% block main %}
        <div class="page-header">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <h1 class="smaller"><a href="{% url 'admin:project_overview' category.project.id %}">{{category.project.name}}</a></h1>
                        <a href="{% url 'admin:project_overview' category.project.id %}"><span class="glyphicon glyphicon-arrow-left"></span> Project home page</a>
                    </div>
                    <ul class="header-nav">
                        <li class="active"><a href="{% url 'admin:category_list' category.project.id %}">Categories <span class="badge">{{ category.project.categories.count }}</span></a></li>
                        <li><a href="{% url 'admin:usergroup_list' category.project.id %}">User groups <span class="badge">{{ category.project.usergroups.count }}</span></a></li>
                    </ul>
                </div>

            </div>
        </div>

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

            <div class="row">
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h6 class="item-info">Category</h6>
                            <h3>{{ category.name }}</h3>
                            {% if category.description %}<p>{{ category.description|linebreaksbr }}</p>{% endif %}
                        </div>
                        <div class="list-group">
                            <a href="{% url 'admin:category_overview' category.project.id category.id %}" class="list-group-item">Fields</a>
                            <a href="{% url 'admin:category_display' category.project.id category.id %}" class="list-group-item">Display</a>
                            <a href="{% url 'admin:category_settings' category.project.id category.id %}" class="list-group-item active">Settings</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <h3 class="header">Settings</h3>
                        <form role="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" name="description" id="description">{{ category.description }}</textarea>
                            </div>

                            <div class="form-group">
                                <label for="description" class="control-label">Display field</label>
                                {% if category.fields.all %}
                                <select name="display_field" class="form-control input-lg">
                                    {% for field in category.fields.all %}
                                    <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 that category.</p>
                                {% endif %}
                            </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><br>A new contribution of this category will not appear on the map immediately. A moderate has to approve new contributions first.
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="default_status" value="active" {% if category.default_status == 'active' %}checked{% endif %}> <strong>Active</strong><br>A new contribution will appear on the map immediately.
                                    </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>

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

{% block modals %}
	{% if admin %}
		<div class="modal fade" id="make-inactive-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">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 class="modal fade" id="make-active-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">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-dismiss="modal">Yes, make the category active.</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="delete-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">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>

                        {% if num_contributions > 0%}
                        <p class="text-danger">There are currently {{ num_contributions }} contributions of this category. Deleting the category will delete all of the contributions. We suggest to make this categpory inactive instead to keep the contributions. </p>
                        {% endif %}
                        <ul>
                            <li>Deleting a category can not be undone.</li>
                            <li>All data contributed using this category will be deleted as well.</li>
                        </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>
	{% endif %}
{% endblock %}

{% block libraries %}
	{% if admin %}
			<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>
			<script type="text/javascript">
				$(function() {
					$('[rel="tooltip"]').tooltip();
				});
			</script>
	{% endif %}
{% endblock %}
