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

{% block body %}

<nav class="navbar has-background-light">
    <div class="navbar-start ml-4">
        <a href="/" class="navbar-item">
            <span class="icon is-clickable">
                <i class="fa fa-home"></i>
            </span>
            <strong>ArCOA Digital Archive</strong>
        </a>
    </div>
    {% if app.user %}
    <div class="navbar-end">
      <div class="navbar-item" data-controller="dropdown">
        <div class="buttons dropdown is-right" data-dropdown-target="drop">
            <div class="dropdown-trigger" data-action="click->dropdown#toggle">
                <a class="button is-primary">
                    <span class="icon">
                        <i class="fa fa-user-circle"></i>
                    </span>
                    <span class="pl-3">
                        {{ app.user.firstname }} {{ app.user.lastname }}
                    </span>
                    <span class="icon">
                        <i class="fa fa-caret-down" data-dropdown-target="caret"></i>
                    </span>
                </a>
            </div>
            <div class="dropdown-menu" role="menu">
                <div class="dropdown-content">
                    <a href="/profile" class="dropdown-item">
                        <span class="icon is-small">
                            <i class="fa fa-user"></i>
                        </span>
                        <span class="pl-2 is-size-6">Profile</span>
                    </a>
                  {% if  is_granted('ROLE_ADMIN') %}
                    <a href="/admin" class="dropdown-item">
                        <span class="icon is-small">
                            <i class="fa fa-cogs"></i>
                        </span>
                        <span class="pl-2 is-size-6">Admin</span>
                    </a>
                  {% endif %}
                  <hr class="dropdown-divider" />
                    <a href="/logout" class="button is-link is-fullwidth">
                        <span class="icon is-small">
                            <i class="fa fa-sign-out"></i>
                        </span>
                        <span class="has-text-centered"> Logout</span>
                    </a>
                </div>
            </div>
        </div>
      </div>
    {% endif %}
</nav>
<div class="columns mb-0">
    <div class="column is-one-fifth arcoa-menu mb-0">
       <aside class="menu" data-controller="menu"
        data-menu-state-value="0">
        {% if 'ROLE_READER' not in app.user.roles %}
            <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" data-action="click->menu#toggle">
                    <i class="fa fa-angle-right" data-menu-target="vocabIcon"></i>
                </span>
            </p>
            <ul class="pl-6 is-hidden has-text-white" data-menu-target="vocabs" id="vocabs">
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Access rights
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Civilization
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Copyright
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Document format
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Document type
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_vocab_func_context') }}">
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Functional context
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Language
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        License
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Medium
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Object class
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_vocab_object_type') }}">
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Object type
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Period
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Script
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        Text type
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        3D execution
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        3D condition
                    </a>
                </li>
                <li>
                    <a>
                        <span class="icon pr-3">
                            <i class="fa fa-plus"></i>
                        </span>
                        3D reference
                    </a>
                </li>
            </ul>
            {% endif %}
            <p class="menu-label has-text-white mt-3 pt-5 pl-5 is-size-6">
                Records
                <span class="icon is-clickable pl-4" id="for-records" data-action="click->menu#toggle">
                    <i class="fa fa-angle-right" data-menu-target="recordIcon"></i>
                </span>
            </p>
            <ul class="pl-6 is-hidden has-text-white"
                data-menu-target="records"
                id="records">
                <li class="pt-1 pb-1">
                    <a href="{{ path('app_bibliography_landing') }}">
                        Bibliography
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="{{ path('app_collection_landing') }}">
                        Collection
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="{{ path('app_collector_landing') }}">
                        Collector
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        Conservation place
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        Document
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        Image
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        Object
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        Site
                    </a>
                </li>
                <li class="pt-1 pb-1">
                    <a href="">
                        3D model
                    </a>
                </li>
            </ul>
       </aside>
    </div>
    <div class="column mt-6 mb-6">
        {% block rightpanel %}{% endblock %}
    </div>
</div>
{% endblock %}