{% extends 'base.html' %}

{% block bodydata %}
data-project-id="{{ project.id }}"
data-project-locked="{{ project.islocked }}"
data-category-id="{{ category.id }}"
data-field-id="{{ field.id }}"
{% endblock %}

{% block title %} | Project: {{ project.name }} - Category: {{ category.name }} - Field: {{ field.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">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h6 class="item-info">Field</h6>

                    <h3>
                        {% if project.islocked %}<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>{% endif %}
                        <span>{{ field.name }}</span>
                    </h3>
                </div>

                <table class="table table-striped field-info">
                    <tr><td><strong>Key</strong></td><td><code>{{ field.key }}</code></td></tr>
                    <tr><td><strong>Type</strong></td><td>{{ field.type_name }}</td></tr>
                    <tr><td><strong>Category</strong></td><td><a href="{% url 'admin:category_overview' field.category.project.id field.category.id %}">{{ category.name }}</a></td></tr>
                </table>
            </div>
        </div>

        <div class="col-sm-8">
            <h3 class="header">Field settings</h3>

            <form method="POST" action="{% url 'admin:category_field_settings' field.category.project.id field.category.id field.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="{{ field.name }}" />
                </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">{{ field.description }}</textarea>
                </div>

                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="required" {% if field.required %}checked{% endif %} />
                            <strong>A value for this field is mandatory</strong>
                            <p>Tick this box, if you want to ensure contributors provide a value for this field.</p>
                        </label>
                    </div>
                </div>

                {% if field.textfield %}
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="textarea" {% if field.textarea %}checked{% endif %} />
                                    <strong>Display this field as textarea.</strong>
                                    <p>Tick this box, if you expect long inputs for this text field.</p>
                                </label>
                            </div>
                        </div>

                        <div class="form-group col-sm-12">
                            <label for="maxlength" class="control-label">Maximum length</label>
                            <input type="number" class="form-control" id="maxlength" name="maxlength" min="0" step="1" {% if not field.textfield.maxlength == None %} value="{{ field.textfield.maxlength }}" {% endif %} />
                        </div>
                    </div>
                {% endif %}

                {% if field.numericfield %}
                    <div class="row">
                        <div class="form-group col-sm-6">
                            <label for="minval" class="control-label">Minimum value</label>
                            <input type="number" step="0.001" class="form-control" id="minval" name="minval" placeholder="e.g.; 1.642" {% if not field.numericfield.minval == None %} value="{{ field.numericfield.minval }}" {% endif %} {% if not field.numericfield.maxval == None %} max="{{ field.numericfield.maxval }}" {% endif %} />
                        </div>

                        <div class="form-group col-sm-6">
                            <label for="maxval" class="control-label">Maximum value</label>
                            <input type="number" step="0.001" class="form-control" id="maxval" name="maxval" placeholder="e.g.; 4541.6" {% if not field.numericfield.maxval == None %} value="{{ field.numericfield.maxval }}" {% endif %} {% if not field.numericfield.minval == None %} min="{{ field.numericfield.minval }}" {% endif %} />
                        </div>
                    </div>
                {% endif %}

                <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>

    {% if field.lookupfield %}
        {% include 'snippets/lookup_values.html' with field=field.lookupfield %}
    {% endif %}

    {% if field.multiplelookupfield %}
        {% include 'snippets/lookup_values.html' with values=field.multiplelookupfield %}
    {% endif %}

    <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>

                {% if is_display_field %}
                <div class="panel-body becareful">
                    <div>
                        <p><strong>The field {{ field.name }} is set as display field for category {{ field.category.name }}.</strong> If you wish to deactivate or delete the field, you have to select another display field in the <a href="{% url 'admin:category_settings' field.category.project.id field.category.id %}">category settings</a> first.</p>
                    </div>
                </div>
                {% endif %}

                {% if is_expiry_field %}
                <div class="panel-body becareful">
                    <div>
                        <p><strong>The field {{ field.name }} is set as expiry field for category {{ field.category.name }}.</strong> If you wish to deactivate or delete the field, you have to select another expiry field in the <a href="{% url 'admin:category_settings' field.category.project.id field.category.id %}">category settings</a> first.</p>
                    </div>
                </div>
                {% endif %}

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

                    <div class="toggle-active {% if field.status == status_types.active %} hidden{% endif %}">
                        <strong>Make the field active</strong>
                        <p>The field will be available for data contribution and data validation 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 field</strong>
                            <p>Deleting a field can not be undone.</p>
                            <a href="#" class="text-danger" data-toggle="modal" data-target="#delete-confirm">Delete this field</a>
                        </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block modals %}
<div role="dialog" class="modal fade" id="delete-confirm" tabindex="-1" role="dialog" 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 field, please read through the consequences of this action:</strong></p>

                <ul>
                    <li>Deleting a field cannot be undone.</li>
                    <li>The field cannot be used for data contribution any longer.</li>
                </ul>
            </div>

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

<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" id="myModalLabel">Are you sure?</h4>
            </div>

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

                <ul>
                    <li>Users will not be able to contribute new data using this field.</li>
                    <li>Existing data will no longer be validated against this field.</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 field 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 field active, please read through the consequences of this action:</strong></p>

                <ul>
                    <li>Users will be able to contribute new data using this field.</li>
                    <li>Existing data will be validated against this field.</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 field active</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block libraries %}
<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/lib/handlebars/handlebars.js"></script>
<script src="/static/js/templates.js"></script>

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