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

{% block body %}

<nav class="navbar has-background-light">
    <div class="navbar-start">
        <a href="/" class="navbar-item">
            <strong>ArCOA Data Entry</strong>
        </a>
    </div>
    {% if app.user %}
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons dropdown is-right">
            <div class="dropdown-trigger">
                <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" id="user-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">Profile</span>
                    </a>
                  {% if 'ROLE_ADMIN' in app.user.roles %}
                    <a href="/admin" class="dropdown-item">
                        <span class="icon is-small">
                            <i class="fa fa-cogs"></i>
                        </span>
                        <span class="pl-2">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 pl-4">
            <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>
                        <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>
                        <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>
                        <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>
            <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">
                    <i class="fa fa-angle-right"></i>
                </span>
            </p>
       </aside>
    </div>
    <div class="column mt-6 mb-6">
        {% block rightpanel %}{% endblock %}
    </div>
</div>
{% endblock %}