{% extends 'data_entry.html.twig' %}

{% block title %}Home | ArCOA{% endblock %}

{% block rightpanel %}
    <div class="has-text-centered">
        <img width="200px" src="{{ asset('img/Logo-ArCOA-def.png') }}" />
    </div>

    <h1 class="is-size-1 mt-6 mb-6 has-text-centered">ArCOA Digital Archive</h1>
    <h2 class="is-size-3 mb-3 has-text-centered">Archivi e Collezioni dell'Oriente Antico</h2>
    <h2 class="is-size-3 mb-6 has-text-centered">Archives and Collections of the Ancient Near East</h2>

    {% for message in app.flashes('warning') %}
        <article class="message is-warning" style="max-width: 35vw; margin: 0 auto;">
            <div class="message-header">
                <p>Warning</p>
                <button class="delete" aria-label="delete"></button>
            </div>
            <div class="message-body">{{ message }}</div>
        </article>
    {% endfor %}

    <div class="columns" style="max-width: 35vw; margin: 0 auto;">
        <div class="column mt-6 mb-5">
            <div class="card content p-4 is-clickable">
                <h3 class="is-size-5 has-text-centered">Resources</h3>
                <figure class="figure has-text-centered">
                    <img src="{{ asset('img/media.png') }}" width="120px" />
                </figure>
            </div>
        </div>
        <div class="column mt-6 mb-5">
            <div class="card content p-4 is-clickable">
                <h3 class="is-size-5 has-text-centered">Guide</h3>
                <figure class="figure has-text-centered">
                    <img src="{{ asset('img/guide.png') }}"  width="120px"/>
                </figure>
            </div>
        </div>
    </div>
<script type="text/javascript" defer>
    const warning = document.querySelector('.is-warning');

    if (warning) {
        warning.querySelector('.delete').addEventListener('click', () => {
            warning.classList.add('is-hidden');
        });
    }
</script>
{% endblock %}