{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">{{ object.name }}</h1>
        {#
        <div class="field is-grouped is-grouped-multiline">
            <div class="control">
                {% if calibration is none or calibration.state == 0 %}
                    <span class="tags has-addons">
                        <span class="tag is-dark">étalonnage</span>
                        <span class="tag is-danger">aucune donnée</span>
                    </span>
                {% elif calibration.state == 1 %}
                    <span class="tags has-addons">
                        <span class="tag is-dark">étalonnage</span>
                        <span class="tag is-warning">pas fait</span>
                    </span>
                {% elif calibration.state == 2 %}
                    <a href="/calibration/{{ object.id }}" class="tags has-addons">
                        <span class="tag is-dark">étalonnage</span>
                        <span class="tag is-success">fait</span>
                    </a>
                {% endif %}
            </div>
        </div>
        {% if calibration is none or calibration.state == 0 %}
            <div class="field is-grouped">
                <a href="/calibrate/{{ object.id }}" class="button is-link">Étalonner le scanner</a>
                <a href="#" title="Non implémenté" disabled="disabled" class="button is-link">Utiliser le dernier étalonnage connu</a>
            </div>
        {% endif %}
        #}
        {% if calibration %}
            <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">
                                <a href="/calibrate/" class="button is-link">Réutiliser le dernier étalonnage</a>
                            </div>
                        </div>
                </div>
                <button class="modal-close is-large" aria-label="close"></button>
            </form>
        {% endif %}
        </div>
    </div>
</section>
{% endblock content %}

{% block extrajs %}{% if not calibration %}
<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');
        });
    });
</script>
{% endif %}{% endblock %}