{% extends "base.html" %}

{% load filters %}
{% load usergroups %}

{% block title %} | Data grouping: {{grouping.name}}{% endblock %}

{% block main %}
	{% csrf_token %}

        <div class="page-header">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <h1 class="smaller"><a href="{% url 'admin:project_overview' grouping.project.id %}">{{grouping.project.name}}</a></h1>
                        <a href="{% url 'admin:project_overview' grouping.project.id  %}"><span class="glyphicon glyphicon-arrow-left"></span> Project home page</a>
                    </div>
                    <ul class="header-nav">
                        <li><a href="{% url 'admin:category_list' grouping.project.id %}">Categories <span class="badge">{{grouping.project.categories.count }}</span></a></li>
                        <li class="active"><a href="{% url 'admin:grouping_list' grouping.project.id %}">Data groupings <span class="badge">{{grouping.project.groupings.count }}</span></a></li>
                        <li><a href="{% url 'admin:usergroup_list' grouping.project.id %}">User groups <span class="badge">{{grouping.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">Data grouping</h6>
                            <h3>{{ grouping.name }}</h3>
                            {% if grouping.description %}<p>{{ grouping.description|linebreaksbr }}</p>{% endif %}
                        </div>
                        <div class="list-group">
                            <a href="{% url 'admin:grouping_overview' grouping.project.id grouping.id %}" class="list-group-item">Filters</a>
                            <a href="{% url 'admin:grouping_permissions' grouping.project.id grouping.id %}" class="list-group-item">Permissions</a>
                            <a href="{% url 'admin:grouping_settings' grouping.project.id grouping.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:grouping_settings' grouping.project.id grouping.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" required value="{{ grouping.name }}">
                        </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">{{ grouping.description }}</textarea>
                        </div>

                        <div class="form-group">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="reset" class="btn 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>
                                <strong>Delete data grouping</strong>
                                <p>Deleting the data grouping can not be undone.</p>
                                <a href="#" class="text-danger" data-toggle="modal" data-target="#delete-confirm">Delete this data grouping</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>

		<div class="container tab-content">
			<div class="row tab-pane" id="permissions">
                <div class="col-md-12">
                    <div class="panel panel-default"> <!-- User group list -->
                        <div class="panel-heading">
                            <h2 class="panel-title">User permissions</h2>
                            Select the user groups that you want to grant access access to this map.
                        </div>
                        <ul class="list-group">
                            {% usergroups grouping %}
                        </ul>
                    </div>
                </div>
            </div>

			<div class="row tab-pane" id="general-settings">

			</div>
		</div>
{% endblock %}

{% block modals %}
		<!-- Delete confirmation modal -->
		<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 class="text-danger">You are about to delete the data grouping <strong>{{grouping.name}}</strong>. This can not be undone.</p>
						<ul>
							<li>All users who are solely assigned to one of the views user groups will not be able to access the project any longer.</li>
                            <li>However, the data accesible through this grouping will not be deleted.</li>
						</ul>
					</div>
					<div class="modal-footer panel-footer">
                        <a href="{% url 'admin:grouping_delete' grouping.project.id grouping.id %}" class="btn btn-danger">I'm absolutely sure, delete the data grouping!</a>
					</div>
				</div>
			</div>
		</div>
		<!-- /Delete confirmation modal -->

{% endblock %}

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