{% extends '_base.html' %}
{% from 'bootstrap/form.html' import render_form %}
{% block content %}

    <div style="width:80%">
        <h1>Request cloudless mosaic {{ geo }}</h1>
        <hr/>
        <div class="col-sm-6">
            {{ render_form(form, button_style='primary') }}
        </div>

        <br><br>

        <div>
            <div>
                <h3>Requested dates</h3>
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date from</th>
                        <th>Date to</th>
                        <th>Tile</th>
                        <th>Resolution</th>
                        <th>Started?</th>
                        <th>Finished?</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for cloudless in cloudlesses %}
                        <tr>
                            <td>{{ cloudless.id }}</td>
                            <td data-user="{{ cloudless.id }}">{{ cloudless.date_from }}</td>
                            <td data-user="{{ cloudless.id }}">{{ cloudless.date_to }}</td>
                            <td data-user="{{ cloudless.id }}">{{ cloudless.tile }}</td>
                            <td data-user="{{ cloudless.id }}">{{ cloudless.resolution }}</td>
                            <td data-user="{{ cloudless.id }}"
                                data-field="started">{{ cloudless.started }}</td>
                            <td data-user="{{ cloudless.id }}"
                                data-field="finished">{{ cloudless.finished }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


{% endblock %}