{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container content">
        <h1 class="title">{{ object.name }}</h1>
        <div class="my-3">
            <a class="button is-link mr-3" href="/download-object/tar/{{ object.id }}">Télécharger les données de l'objet (archive TAR)</a>
            <a class="button is-link" href="/download-object/zip/{{ object.id }}">Télécharger les données de l'objet (archive ZIP)</a>
        </div>
        {% if object.acquisitions %}
            <div class="fixed-grid has-6-cols">
                <div class="grid">
                    {% for acquisition in object.acquisitions %}
                    <a class="cell" href="/scan-acquisition/{{ acquisition.id }}">
                        <div class="has-text-centered p-3" style="border-radius: 15px; border-width: 1px; border-color: {% if acquisition.validated %}green{% else %}red{% endif %}; border-style: solid;">
                            <div>
                                <img src="/data/objects/{{ object.id }}/{{ acquisition.id }}/{{ leds[0] }}.jpg">
                            </div>
                            <p>
                                {{ acquisition.get_pretty_date() }}
                            </p>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        {% if calibration.state == CalibrationState.IsValidated %}
            <a href="/scan/{{ object.id }}" class="button is-link">Faire un scan</a>
        {% else %}
            <button class="button is-link" id="scan">Faire un scan</button>
            <div id="calibration-modal" class="modal">
                <div class="modal-background"></div>
                    <div class="modal-content">
                        <div class="has-text-centered mb-3">Le scanner n'est pas étalonné.</div>

                        <div class="field is-grouped is-grouped-centered">
                            <div class="control">
                                <a href="/calibrate/" class="button is-link">Étalonner le scanner</a>
                            </div>
                            <div class="control">
                                <button id="use-last-calibration-button" href="/use-last-calibration/" class="button is-link">Réutiliser le dernier étalonnage</button>
                            </div>
                        </div>
                </div>
                <button class="modal-close is-large" aria-label="close"></button>
            </form>
        {% endif %}
        </div>
    </div>
</section>
{% endblock content %}

{% block extrajs %}{% if calibration.state < CalibrationState.IsValidated %}
<script>
    let modal = document.getElementById('calibration-modal');
    document.getElementById('scan').addEventListener('click', () => {
        modal.classList.add('is-active');
    });
    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach((close) => {
        close.addEventListener('click', () => {
            modal.classList.remove('is-active');
        });
    });
    document.getElementById('use-last-calibration-button').addEventListener('click', async () => {
        let resp = await fetch('/api/use-last-calibration');
        await resp.text();
        window.location.href = '/scan/{{ object.id }}';
    });
</script>
{% endif %}{% endblock %}