<nav>
  <ul>
  </ul>
  <ul>
    <li><img src="/static/img/logo.svg" alt="DrWhy" height="75" width="75"></li>
  </ul>
  <ul>
    <li>
      <details role="list">
        <summary class="mdi mdi-movie" aria-haspopup="listbox" role="Link">
          Series
        </summary>
        <ul role="listbox">
          <li><a href="/medias?q=/Series/DrWho">Dr WHO(2005)</a></li>
          <li><a href="/medias?q=/Series/DrWho Classic">Dr WHO Classic(1963)</a></li>
          <li><a href="/medias?q=/Series/Torchwood">Torchwood</a></li>
          <li><a href="/medias?q=/Series/The Sarah Jane Adventures">The Sarah Jane Adventures</a></li>
          <li><a href="/medias?q=/Series/Class">Class</a></li>
          <li><a href="/medias?q=/Series/K-9">K-9</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details role="list">
        <summary class="mdi mdi-thought-bubble" aria-haspopup="listbox" role="Link">
          BD
        </summary>
        <ul role="listbox">
          <li><a href="/medias?q=/BD">Comming soon</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details role="list">
        <summary class="mdi mdi-book-open-variant" aria-haspopup="listbox" role="Link">
          Romans
        </summary>
        <ul role="listbox">
          <li><a href="/medias?q=/Romans">Comming soon</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details role="list">
        <summary class="mdi mdi-podcast" aria-haspopup="listbox" role="Link">
          Podcast
        </summary>
        <ul role="listbox">
          <li><a href="/medias?q=/Podcast">Comming soon</a></li>
        </ul>
      </details>
    </li>
  </ul>
  <ul>
    {% if user is defined %}
    <details role="list">
      <summary aria-haspopup="listbox" role="Link">
        <img src="{{user.image}}" alt="avatar" class="rounded" width="50" height="50">
      </summary>
      <ul role="listbox">
        <li><a class="dropdown-item" href="/profile/{{user.id}}">Profil</a></li>
        <li><a class="dropdown-item text-danger" href="/logout">Deconnexion</a></li>
      </ul>
    </details>
    {% else %}
      <button class="outline" data-target="modal-signin" onClick="toggleModal(event)">Inscription</button>
      <button class="outline" data-target="modal-login" onClick="toggleModal(event)">Connexion</button>
      {# <button type="button" class="btn btn-primary text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalSignUp">Inscription</button>
      <button type="button" class="btn btn-black text-light ms-2" data-bs-toggle="modal" data-bs-target="#modalLogIn">Connexion</button> #}
    {% endif %}
  </ul>
  <ul>
  </ul>
</nav>

{% if user is not defined %}
<dialog id="modal-login">
  <article>
    <a href="#close"
      aria-label="Close"
      class="close"
      data-target="modal-login"
      onClick="toggleModal(event)">
    </a>
    {% include 'forms/user/login.html.twig' %}
  </article>
</dialog>
<dialog id="modal-signin">
  <article>
    <a href="#close"
      aria-label="Close"
      class="close"
      data-target="modal-signin"
      onClick="toggleModal(event)">
    </a>
    {% include 'forms/user/register.html.twig' %}
  </article>
</dialog>
{% endif %}