{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">{{ object.name }}</h1>
        {% 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 %}