{% load leaflet_tags %}
{% load staticfiles %}

{% leaflet_js %}
{% leaflet_css %}

<link rel="stylesheet" href="{% static 'geonode/css/leaflet.draw.css' %}"/>
<script src="{% static 'geonode/js/draw/leaflet.draw.js' %}"></script>

<div class="modal fade" id="download_clip_page" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Download Clip</h4>
            </div>
            <div class="modal-body">
                <div id="download-clip-error-message" class="label label-danger" style="margin-bottom: 50px; display: none">Error message</div>
                <div id="download-clip-map"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-md btn-block" data-toggle="modal" data-target="#download_clip_page" id="download-clip-button">Download Clip</button>
            </div>
        </div>
    </div>
</div>

<style>
    #download-clip-map {
        height: 400px;
        text-align: center;
    }

    .leaflet-control-zoom {
        left: 0 !important;
    }
</style>

{% include 'clip-and-ship/download-clip.html' %}