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

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

{% block body %}

<div class="columns mb-0">
    <div class="column is-one-fifth arcoa-menu mb-0">
       <aside class="menu">
            <p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
                Vocabularies
                <span class="icon is-clickable pl-4" id="for-vocabs">
                    <i class="fa fa-angle-right"></i>
                </span>
            </p>
            <ul class="pl-6 is-hidden has-text-white" id="vocabs">
                <li><a>Access rights</a></li>
                <li><a>Civilization</a></li>
                <li><a>Copyright</a></li>
                <li><a>Document format</a></li>
                <li><a>Document type</a></li>
                <li><a>Functional context</a></li>
                <li><a>Language</a></li>
                <li><a>License</a></li>
                <li><a>Medium</a></li>
                <li><a>Object class</a></li>
                <li><a>Object type</a></li>
                <li><a>Period</a></li>
                <li><a>Script</a></li>
                <li><a>Text type</a></li>
            </ul>
       </aside>
    </div>
    <div class="column mt-6 mb-6">
        <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>

        <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>
    </div>
</div>

{% endblock %}