<div class="toolbar" role="banner">

  <div class="left_part">
    <div class="logo_container">
      <img class="sandkasten-logo"
           routerLink=""
           routerLinkActive="active"
           [routerLinkActiveOptions]="{ exact: true }"
           [src]="sandkasten_logo" alt="Logo-Sandkasten" />
       <h2 class="logo_title">{{ title }}</h2>
    </div>


    <nav class="menu">
      <a
        routerLink=""
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >{{ 'HeaderPage.Home' | translate }} </a>

      <a
        routerLink="editor"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >{{ 'HeaderPage.Editor' | translate }}</a>

      <a
        routerLink="documentation"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >{{ 'HeaderPage.Documentation' | translate }}</a>
    
      <a
        routerLink="contact"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >{{ 'HeaderPage.Contact' | translate }}</a>

    </nav>

  </div>

  <div class="right_part">

    <p>{{ 'HeaderPage.Language' | translate }} 
      <select (change)="onLanguageChange($event)">
        <option value="fr">Français</option>
        <option value="en">English</option>
      </select>
      <img [src]="getFlagImageUrl()" alt="Language Flag" width="50" height="30" />
    </p>

    <a href="https://codefirst.iut.uca.fr/git/sandkasten"
       class="gitea_logo_container">
      <img class="gitea-logo"
           [src]="gitea_logo" alt="Logo-Gitea" />
    </a>
    <p>Version : {{ version }}</p>
  </div>
</div>

