{% extends "layout_maps.html" %}

{% block title %}
<title>Create map | Contextualise</title>
{% endblock %}

{% block javascript %}
<script>
    document.querySelector('.custom-file-input').addEventListener('change', function (e) {
        var fileName = document.getElementById("map-image-file").files[0].name;
        var nextSibling = e.target.nextElementSibling;
        nextSibling.innerText = fileName;
    })
</script>
{% endblock %}

{% block content %}
<h1>Create map</h1>
<hr />
<form action="{{ url_for('map.create') }}" autocomplete="off" enctype="multipart/form-data" method="post" role="form">
    <input name="_csrf_token" type="hidden" value="{{ csrf_token() }}">
    <div class="form-group">
        <label for="map-name"><strong>Name</strong></label>
        <input class="form-control" id="map-name" name="map-name" placeholder="Enter title" required autofocus
            type="text" value="{{ map_name }}">
    </div>
    <div class="form-group">
        <label for="map-description"><strong>Description</strong></label>
        <textarea class="form-control" id="map-description" name="map-description"
            rows="3">{{ map_description }}</textarea>
    </div>
    <div class="form-group">
        <label for="map-image-file"><strong>Image</strong></label>
        <div class="custom-file">
            <input type="file" accept=".jpg,.jpeg,.png" class="custom-file-input" id="map-image-file"
                name="map-image-file">
            <label class="custom-file-label" for="map-image-file">Choose file</label>
        </div>
        {% if error|bitwise_and(1) == 1 %}
        <small class="text-danger">
            No file part.
        </small>
        {% endif %}
        {% if error|bitwise_and(2) == 2 %}
        <small class="text-danger">
            No file selected.
        </small>
        {% endif %}
        {% if error|bitwise_and(4) == 4 %}
        <small class="text-danger">
            Unsupported file type; that is, not of type PNG or JPG.
        </small>
        {% endif %}
    </div>
    {% if 'admin' in current_user.roles %}
    <strong>Access?</strong>
    <div class="form-check">
        <input checked class="form-check-input" id="published-radio-1" name="map-published" type="radio" value="0">
        <label class="form-check-label" for="published-radio-1">
            Private
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" id="published-radio-2" name="map-published" type="radio" value="1">
        <label class="form-check-label" for="published-radio-2">
            Published
        </label>
    </div>
    {% endif %}
    <br />
    <a class="btn btn-secondary" href="{{ url_for('map.index') }}" role="button">Cancel</a>
    <button class="btn btn-success" type="submit">Create map</button>
</form>
<br />
{% endblock %}