{% extends 'base.html' %}

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

{% block title %} | Project: {{ project.name }} - Add new web resource{% endblock %}

{% block main %}
{% include 'snippets/wr_header.html' %}

<div class="container">
    <div class="row">
        <form role="form" id="form" class="col-md-8 col-md-offset-2" method="POST" action="{% url 'geokey_webresources:webresource_add' project.id %}" enctype="multipart/form-data" novalidate>
            {% csrf_token %}

            <h3 class="header">
                {% if project.islocked %}<span class="glyphicon glyphicon-lock text-warning" aria-hidden="true"></span>{% endif %}
                <span>Add new web resource</span>
            </h3>

            <div class="form-group {% if form.errors.name %}has-error{% endif %}">
                <label for="name" class="control-label">Name (required)</label>
                <input type="text" id="name" class="form-control" name="name" value="{{ form.name.value|default_if_none:'' }}" maxlength="100" required />
                {% if form.errors.name %}<span class="help-block">{{ form.errors.name|striptags }}</span>{% endif %}
            </div>

            <div class="form-group {% if form.errors.description %}has-error{% endif %}">
                <label for="description" class="control-label">Description</label>
                <textarea id="description" class="form-control" rows="5" name="description">{{ form.description.value|default_if_none:'' }}</textarea>
                {% if form.errors.description %}<span class="help-block">{{ form.errors.description|striptags }}</span>{% endif %}
            </div>

            <div class="form-group {% if form.errors.data_format %}has-error{% endif %}">
                <label for="data_format" class="control-label">Data format (required)</label>
                <select id="data_format" class="form-control" name="data_format" required>
                    <option value="">Please select a value</option>
                    {% for key, value in data_formats %}
                        <option value="{{ key }}" {% if form.data_format.value == key %}selected{% endif %}>{{ value }}</option>
                    {% endfor %}
                </select>
                {% if form.errors.data_format %}<span class="help-block">{{ form.errors.data_format|striptags }}</span>{% endif %}
            </div>

            <div class="form-group {% if form.errors.url %}has-error{% endif %}">
                <label for="name" class="control-label">URL (required)</label>
                <input type="url" id="url" class="form-control" name="url" placeholder="https://" value="{{ form.url.value|default_if_none:'' }}" maxlength="250" required />
                {% if form.errors.url %}<span class="help-block">{{ form.errors.url|striptags }}</span>{% endif %}
            </div>

            <div class="form-group {% if form.errors.colour %}has-error{% endif %}">
                <label for="colour" class="control-label">Colour</label>
                <div id="colour" class="input-group">
                    <input type="text" class="form-control" name="colour" value="{{ form.colour.value|default_if_none:'#0033ff' }}" />
                    <span class="input-group-addon"><i></i></span>
                </div>
                {% if form.errors.colour %}<span class="help-block">{{ form.errors.colour|striptags }}</span>{% endif %}
            </div>

            <div class="form-group {% if form.errors.symbol %}has-error{% endif %}">
                <label for="symbol" class="control-label">Symbol</label>
                <input type="file" id="symbol" name="symbol" accept="image/*" data-target="symbol" />
                {% if form.errors.symbol %}<span class="help-block">{{ form.errors.symbol|striptags }}</span>{% endif %}
            </div>

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

{% block libraries %}
<link rel="stylesheet" href="/static/lib/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<script type="text/javascript" src="/static/lib/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

<link rel="stylesheet" href="/static/lib/bootstrap-fileinput/css/bootstrap-fileinput.min.css">
<script type="text/javascript" src="/static/lib/bootstrap-fileinput/js/bootstrap-fileinput.min.js"></script>

<script type="text/javascript" src="/static/js/admin.ui.forms.validate.js"></script>
<script type="text/javascript" src="/static/js/admin.ui.fileinput.js"></script>

<script type="text/javascript">
    // Initialise color picker
    $('#colour').colorpicker({
        format: 'hex',
        color: '#' + (Math.random() * 0xFFFFFF << 0).toString(16)
    });

    // Initialise file upload
    $('input:file').each(function() {
        Ui.FileInput.init($(this), {
            showUpload: false,
            showCancel: false
        });
    });
</script>
{% endblock %}
