{% extends 'base.html' %}

{% 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 }} - Create new field{% 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">
        <form class="col-md-8 col-md-offset-2" method="POST" action="#" novalidate>
            {% csrf_token %}

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

            <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 {%if data %}value="{{ data.name }}"{% endif %} />
            </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" {%if data %}value="{{ data.description }}"{% endif %}></textarea>
            </div>

            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="required" {% if data.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>

            <div class="form-group">
                <label for="status" class="control-label">Type</label>
                <select name="type" id="type" class="form-control" required>
                    <option value="">Please select the data type of the field.</option>
                    {% for field in fieldtypes %}
                        <option value="{{ field.fieldtype }}" {% if data.type == field.fieldtype %}selected{% endif %}>{{ field.type_name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="row hidden field-special" id="text">
                <div class="form-group col-sm-12">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="textarea" />
                            <strong>Display this field as textarea.</strong>
                            <p>Tick this box, if you expect long inputs for this text field.</p>
                    </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" />
                </div>
            </div>

            <div class="row hidden field-special" id="minmax">
                <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" />
                </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" />
                </div>
            </div>

            <div class="row hidden field-special" id="lookup">
                <div class="col-sm-12">
                    <div class="alert alert-info">
                        <p>You can add accepted values after you save the new field.</p>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Save</button>
                <a role="button" href="{% url 'admin:category_overview' project.id category.id %}" class="btn btn-link">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

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