{% load static %}
<!DOCTYPE html>
<html lang="de-CH" class="no-js no-ie" itemscope itemtype="http://schema.org/WebPage">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>{% block title %}Vorgaben Informatiksicherheit{% endblock %} - Schweizerische Eidgenossenschaft</title>

  <!-- Swiss Design System CSS -->
  <link rel="stylesheet" href="{% static 'swiss/css/vendors.css' %}">
  <link rel="stylesheet" href="{% static 'swiss/css/admin.css' %}">
  <link rel="stylesheet" href="{% static 'swiss/css/print.css' %}" media="print">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="{% static 'custom/css/admin_extras.css' %}">

  <!-- Favicons -->
  <link rel="shortcut icon" href="{% static 'swiss/img/ico/favicon.ico' %}">
  <link rel="apple-touch-icon" sizes="57x57" href="{% static 'swiss/img/ico/apple-touch-icon-57x57.png' %}">
  <link rel="apple-touch-icon" sizes="114x114" href="{% static 'swiss/img/ico/apple-touch-icon-114x114.png' %}">
  <link rel="icon" type="image/png" href="{% static 'swiss/img/ico/favicon-96x96.png' %}" sizes="96x96">
  <link rel="icon" type="image/png" href="{% static 'swiss/img/ico/favicon-32x32.png' %}" sizes="32x32">
  <meta name="msapplication-TileColor" content="#ffffff">
</head>
<body>

  <!-- Accessibility skip links -->
  <ul class="access-keys">
    <li><a href="/" accesskey="0">Startseite</a></li>
    <li><a href="#main-navigation" accesskey="1">Hauptnavigation</a></li>
    <li><a href="#content" accesskey="2">Inhalt</a></li>
  </ul>

  <!-- Header with Swiss Logo -->
  <header>
    <a href="/" class="brand hidden-xs" title="Zur Startseite">
      <img src="{% static 'swiss/img/logo-CH.svg' %}"
           onerror="this.onerror=null; this.src='{% static 'swiss/img/logo-CH.png' %}'"
           alt="Zur Startseite" />
      <h1>Vorgaben Informatiksicherheit BIT</h1>
    </a>
    
    <!-- User Menu -->
    {% if user.is_authenticated %}
    <div class="user-menu" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none; color: #000; display: flex; align-items: center;">
          <span style="font-size: 24px; margin-right: 8px;">👤</span>
	  <span class="hidden-xs" style="margin-left: 0;">{{ user.first_name }} {{ user.last_name }}</span>
          <span class="caret" style="margin-left: 8px;"></span>
        </a>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li><a href="{% url 'user_comments' %}">Meine Kommentare</a></li>
            {% if user.is_staff %}
            <li><a href="{% url 'all_comments' %}">Alle Kommentare</a></li>
            {% endif %}
            <li><a href="{% url 'password_change' %}">Passwort ändern</a></li>
            <li class="divider"></li>
            <li>
              <form method="post" action="{% url 'logout' %}" style="display: inline;">
                {% csrf_token %}
                <button type="submit" style="background: none; border: none; color: inherit; padding: 3px 20px; width: 100%; text-align: left; cursor: pointer;">
                  Abmelden
                </button>
              </form>
            </li>
          </ul>
      </div>
    </div>
    {% else %}
    <div class="user-menu" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">
      <a href="{% url 'login' %}" class="btn btn-sm btn-primary" style="text-decoration: none;">
        Anmelden
      </a>
    </div>
    {% endif %}
  </header>

  <!-- Main Navigation -->
  <nav class="nav-main yamm navbar" id="main-navigation">
    <h2 class="sr-only">Navigation</h2>

    <!-- Mobile Navigation -->
    <section class="nav-mobile">
      <div class="table-row">
        <div class="nav-mobile-header">
          <div class="table-row">
            <span class="nav-mobile-logo">
              <img src="{% static 'swiss/img/swiss.svg' %}"
                   onerror="this.onerror=null; this.src='{% static 'swiss/img/swiss.png' %}'"
                   alt="Schweizerische Eidgenossenschaft" />
            </span>
            <h1><a href="/">Vorgaben Informatiksicherheit</a></h1>
          </div>
        </div>
        <div class="table-cell dropdown">
          <a href="#" class="nav-mobile-menu dropdown-toggle" data-toggle="dropdown">
            <span class="icon icon--menu"></span>
          </a>
          <div class="drilldown dropdown-menu" role="menu">
            <div class="drilldown-container">
              <nav class="nav-page-list">
                <ul>
                  <li><a href="/dokumente">Standards</a></li>
                  {% if user.is_staff %}
                  <li><a href="/dokumente/unvollstaendig/">Unvollständig</a></li>
                  <li><a href="/autorenumgebung/">Autor</a></li>
                  {% endif %}
                  <li><a href="/referenzen">Referenzen</a></li>
                  <li><a href="/stichworte">Stichworte</a></li>
                  <li><a href="/search">Suche</a></li>
                </ul>
                <a href="#" class="yamm-close-bottom">
                  <span class="icon icon--top" aria-hidden="true"></span>
                </a>
              </nav>
            </div>
          </div>
        </div>
        <div class="table-cell dropdown">
          <a href="/search" class="nav-mobile-menu">
            <span class="icon icon--search"></span>
          </a>
        </div>
      </div>
    </section>

    <!-- Desktop Tab Navigation -->
    <ul class="nav navbar-nav">
      <li class="dropdown {% if request.resolver_match.url_name == 'standard_list' or 'standard' in request.resolver_match.url_name %}current{% endif %}">
        <a href="/dokumente">Standards</a>
      </li>
      {% if user.is_staff %}
      <li class="dropdown {% if 'unvollstaendig' in request.path %}current{% endif %}">
        <a href="/dokumente/unvollstaendig/">Unvollständig</a>
      </li>
      <li class="dropdown {% if 'autorenumgebung' in request.path %}current{% endif %}">
        <a href="/autorenumgebung/">Autor</a>
      </li>
      {% endif %}
      <li class="dropdown {% if 'referenzen' in request.path %}current{% endif %}">
        <a href="/referenzen">Referenzen</a>
      </li>
      <li class="dropdown {% if 'stichworte' in request.path %}current{% endif %}">
        <a href="/stichworte">Stichworte</a>
      </li>
      <li class="dropdown {% if 'search' in request.path %}current{% endif %}">
        <a href="/search">Suche</a>
      </li>
    </ul>
  </nav>

  <!-- Main Content -->
  <div class="container container-main" id="content" style="padding: 2rem 3rem;">
    {% if messages %}
      <div class="row">
        <div class="col-md-12">
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="close" data-dismiss="alert" aria-label="Schliessen">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    <div class="row">
      {% block sidebar_left %}
      {% if block.super or sidebar_left_content %}
      <div class="col-md-3">
        <nav class="nav-page-list" aria-label="Seitennavigation">
          {{ block.super }}
        </nav>
      </div>
      {% endif %}
      {% endblock %}

      <div class="{% if sidebar_left_content or block.super %}col-md-{% if sidebar_right_content %}6{% else %}9{% endif %}{% else %}col-md-{% if sidebar_right_content %}9{% else %}12{% endif %}{% endif %}">
        {% block content %}
        <h2>Inhalt</h2>
        <p>Hauptinhalt der Seite</p>
        {% endblock %}
      </div>

      {% block sidebar_right %}
      {% if block.super or sidebar_right_content %}
      <div class="col-md-3">
        <aside>
          {{ block.super }}
        </aside>
      </div>
      {% endif %}
      {% endblock %}
    </div>
  </div>

  <!-- Footer -->
  <footer>
    <div class="container-fluid footer-service">
      <div class="row">
        <div class="col-sm-12">
          <h2 class="sr-only">Fussbereich</h2>
        </div>
      </div>
    </div>

    <div class="container-fluid footer-address">
      <div class="row">
        <div class="col-sm-6">
          <h3>Vorgaben Informatiksicherheit</h3>
          <p>
            Bundesamt für Informatik und Telekommunikation BIT<br>
            <a href="https://www.bit.admin.ch" target="_blank" rel="noopener">www.bit.admin.ch</a>
          </p>
        </div>
        <div class="col-sm-6 text-right">
           <p class="text-muted">Version {{ version|default:"0.986" }}</p>
         </div>
      </div>
    </div>
  </footer>

  <!-- Swiss Design System Scripts -->
  <script src="{% static 'swiss/js/vendors.min.js' %}"></script>
  <script src="{% static 'swiss/js/main.min.js' %}"></script>

  <!-- Custom Scripts -->
  {% block extra_js %}{% endblock %}

</body>
</html>
