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

{% block bodydata %}
data-project="{{ project.project.id }}"

{% for category in project.categories.all %}
    {% for c_type_key, c_type_value in category_types.items %}
        {% if category.type == c_type_value %}
            data-category_{{ c_type_key }}={{ category.category.id }}
        {% endif %}
    {% endfor %}

    {% for field in category.fields.all %}
        {% for f_type_key, f_type_value in field_types.items %}
            {% if field.type == f_type_value %}
                {% for c_type_key, c_type_value in category_types.items %}
                    {% if category.type == c_type_value %}
                        data-category_{{ c_type_key }}_field__{{ f_type_key }}={{ field.field.id }}
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    {% endfor %}
{% endfor %}
{% endblock %}

{% block title %} | Air Quality: Project {{ project.project.name }} overview{% endblock %}

{% block main %}
{% include 'aq_header.html' %}

<div class="container">
    {% include 'aq_breadcrumb.html' %}

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3 class="header">{{ project.project.name }}</h3>

            {% if project.status == 'inactive' %}
                <div role="alert" class="alert alert-warning">
                    <p>This project is inactive. This is probably some categories or fields were deleted from the original project. Please fix all missing values in order to activate.</p>
                </div>
            {% endif %}

            <form role="form" id="form" method="POST" action="{% url 'geokey_airquality:project' project.id %}" novalidate>
                {% csrf_token %}

                <div class="form-group hidden">
                    <label for="project" class="control-label">Project</label>

                    <select class="form-control" id="project" name="project" required>
                        <option value="">Please select a project</option>
                        {% for project in projects %}
                            <option value="{{ project.id }}">{{ project.name }} ({{ project.categories.count }})</option>
                        {% endfor %}
                    </select>
                </div>

                <div id="loader" class="form-group text-center hidden">
                    <img src="{% static 'img/loader.gif' %}" alt="Loading project..." />
                </div>

                <div id="categories" class="hidden">
                    <label class="control-label">Categories</label>
                    <p class="help-block">Parentheses indicate a total number of text fields + lookup fields of each category.</p>

                    {% for type_key, type_value in category_types.items %}
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="{{ type_key }}" class="control-label">Category for {{ type_value }} µg/m³</label>
                                    <select class="form-control category" id="{{ type_key }}" name="{{ type_key }}" required>
                                        <option value="">Please select a category</option>
                                    </select>
                                </div>

                                <div class="panel panel-default fields hidden">
                                    <div class="panel-body bg-info">
                                        {% for type_key, type_value in field_types.items %}
                                            <div class="form-group">
                                                <label for="{{ type_key }}" class="control-label">{{ type_value }} field</label>
                                                <select class="form-control field {{ type_key }}" name="{{ type_key }}" data-ftk="{{ type_key }}" required>
                                                    <option value="">Please select a field</option>
                                                </select>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <a role="button" href="{% url 'geokey_airquality:index' %}" class="btn btn-link">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h2 class="panel-title">Be careful!</h2>
                </div>

                <div class="panel-body becareful">
                    <div>
                        <strong>Remove project</strong>
                        <p>Removing a project cannot be undone, but it will not delete a project from the database.</p>
                        <a href="#" class="text-danger" data-toggle="modal" data-target="#modal-remove-confirm">Remove</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block modals %}
<div role="dialog" class="modal fade" id="modal-error" tabindex="-1" aria-labelledby="modal-error" 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="modal-delete-confirm">Error</h4>
            </div>

            <div class="modal-body panel-body"><p></p></div>

            <div class="modal-footer panel-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">OK</button>
            </div>
        </div>
    </div>
</div>

<div role="dialog" class="modal fade" id="modal-remove-confirm" tabindex="-1" aria-labelledby="modal-remove-confirm" 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="modal-delete-confirm">Are you sure?</h4>
            </div>

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

                <ul>
                    <li>The project and all of its settings will be removed from the Air Quality database.</li>
                    <li>It will not be possible to add new measurements to the project using the app.</li>
                    <li>The project and its data remain untouched.</li>
                </ul>
            </div>

            <div class="modal-footer panel-footer">
                <a role="button" href="{% url 'geokey_airquality:remove' project.id %}" class="btn btn-danger" data-loader="true">Yes, remove this project</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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