{% set user = getUser() %}
<div class="container-fluid">
  <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
    <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
      <img src="/app/images/app-logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
      <span style="color:#0167b8" class="fs-4 nodefony"><h3>{{nodefony.name|escape}}</h3></span>
    </a>

    <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
      {% if  urlDoc %}
        <li><a href="{{urlDoc}}" class="btn btn-outline-secondary px-2">Documentation</a></li>
      {% endif %}
    </ul>

    <form action="{{url('lang')}}" name="formLang" id="formLang" class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li class="nav-item">
            <div class="input-group input-group-sm">
              <label class="input-group-text">{{"lang"| trans("messages") }} : </label>
              <select class="form-select form-select-sm " name="language"  id="language">
                {% for opt in langs %}
                {% if locale == opt.value %}
                <option value="{{ opt.value|escape}}" selected>
                  {{ opt.name|escape }}
                </option>
                {% else %}
                <option value="{{ opt.value|escape}}">
                  {{ opt.name|escape }}</option>
                  {% endif %}
                  {% endfor %}
                </select>
              </div>
        </li>
      </ul>
    </form>

    {% if  user %}
    <div class="dropdown text-end">
      <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
        {% if user.image %}
          <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
        {% else %}
            <i class="text-large fa fa-user"></i>
        {% endif %}
      </a>
      <ul class="dropdown-menu text-small border-0" aria-labelledby="dropdownUser1">
        <div class="card " style="width: 18rem;height:100%">
          <div class="card-header">
              <h5 class="card-title">Profile</h5>
          </div>
          <div class="card-body text-center" >
            {% if user.image %}
              <img width="100px" height="100px"src="{{ user.image|escape }}" alt=""></img>
            {% else %}
              <img width="100px" height="100px" src="/framework-bundle/images/nodefony-logo.png" alt="nodefony-logo"></img>
            {% endif %}
            <div class="user-info">
              <p>{{"username"|trans("login")}} : {{ user.username|escape }}</p>
              <p>{{"surname"|trans("login")}} : <i> {{ user.surname|escape }} </i> </p>
              <p>{{"name"|trans("login")}} : <i> {{ user.name|escape }} </i> </p>
            </div>
          </div>
          <div class="card-footer text-muted">
            <a href ="{{url("logout")}}" class="card-link">{{"logout"|trans("login")}}</a>
            <a href ="{{url("nodefony-user-update",{username:user.username})}}" class="card-link">{{"update"|trans("login")}}</a>
          </div>
        </div>
      </ul>
    </div>
    {% else %}

    <div class=" text-end">
      <a href="{{url("login",{type:"secure"})}}"
          class="btn btn-sm btn-outline-secondary"
          role="button"
          aria-pressed="false">
          {{trans("signin")}}
      </a>
      <a href="{{url("nodefony-user-create")}}"
          class="btn btn-sm btn-outline-primary"
          role="button"
          aria-pressed="false">
          {{trans("signup")}}
      </a>

    </div>
    {% endif %}
  </header>
</div>