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

{% block title %} | Export: Create new export{% endblock %}

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

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

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3 class="header">Create new export</h3>

            <form role="form" id="form" method="POST" action="{% url 'geokey_export:export_create' %}" novalidate>
                {% csrf_token %}

                <div class="form-group">
                    <label for="name" class="control-label">Name</label>
                    <input type="text" class="form-control" id="name" name="name" maxlength="100" required>
                </div>

                <div class="form-group">
                    <label for="project" class="control-label">Project</label>
                    <select class="form-control" id="project" name="project" required>
                        <option value=""></option>

                        {% for project in projects %}
                            <option value="{{ project.id }}">{{ project.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group hidden">
                    <label for="category" class="control-label">Category</label>
                    <select class="form-control" id="category" name="category" required>
                        <option value=""></option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="control-label">Export length of availability</label>

                    <label class="radio">
                        <input type="radio" name="expiration" value="one_off" required>
                        <span>one off</span>
                    </label>

                    <label class="radio">
                        <input type="radio" name="expiration" value="one_week" required>
                        <span>one week</span>
                    </label>

                    <label class="radio">
                        <input type="radio" name="expiration" value="permanent" required>
                        <span>permanent</span>
                    </label>
                </div>

                <div class="form-group">
                    <label for="geometry" class="control-label">Bounding box</label>

                    <div id="map"></div>
                    <input type="hidden" id="geometry" name="geometry" />
                </div>

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

{% block libraries %}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>

<script src="/static/js/admin.ui.forms.validate.js"></script>
<script src="/static/js/admin.ui.project.geographicextent.js"></script>
<script src="/static/js/admin.ui.export.js"></script>
{% endblock %}
