{% extends "base.html" %}

{% block bodydata %} data-project-id="{{category.project.id}}" data-category-id="{{category.id}}"{% endblock %}
{% block title %} | Create new field{% 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">
			<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 active">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">Settings</a>
                        </div>
                    </div>
                </div>
				<form  role="form" class="col-md-8" method="POST" action="#" novalidate>
					<h3 class="header">Create new field</h3>
					{% 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 {%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" name="description" id="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><br>Tick this box, if you want to ensure contributors provide a value for this field.</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><br>Tick this box, if you expect long inputs for this text field.</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">
                        </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">
                                You can add accepted values after you save the new field.
                            </div>
                        </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>
{% endblock %}

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