<!DOCTYPE html>
  <html lang="en">
    <head>
      <base href="./" />
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>{% block title %}{% endblock %} ~ SpinShare</title>

      <!-- Meta Tags -->
      <link rel="icon" type="image/png" href="{{ asset('assets/img/favicon.png') }}" />
      <meta property="og:site_name" content="SpinShare"/>
      <meta name="description" content="Share your custom charts for the rhythm game Spin Rhythm XD on SpinShare" />
      <link rel="search" href="https://spinsha.re/opensearchdescription.xml" type="application/opensearchdescription+xml" title="SpinShare" />
      {% block meta %}{% endblock %}

      <!-- Styles -->
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@500&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css" />
      <link rel="stylesheet" href="{{ asset('assets/css/main.css?v=' ~ date().timestamp) }}" />
      {% block styles %}{% endblock %}
    </head>
    <body>
      <main>
        <aside>
          <div class="logo">
            <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
          </div>

          <nav>
            <a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}" title="Home"><i class="mdi mdi-home-outline"></i></a>
            <a class="item {% if app.request.attributes.get('_route') == 'index.client' %}active{% endif %}" href="{{ path('index.client') }}" title="Download Client"><i class="mdi mdi-desktop-tower-monitor"></i></a>
            <a class="item {% if app.request.attributes.get('_route') == 'index.support' %}active{% endif %}" href="{{ path('index.support') }}" title="Support"><i class="mdi mdi-hand-heart"></i></a>
            <a class="item {% if app.request.attributes.get('_route') == 'index.legal' %}active{% endif %}" href="{{ path('index.legal') }}" title="Legal"><i class="mdi mdi-gavel"></i></a>
          </nav>

          <form action="{{ path('search.index') }}" method="GET" class="search">
              {% if app.request.attributes.get('_route') != 'search.index' %}
                <input name="q" type="search" placeholder="Search for songs, tags & profiles..." value="{{ searchQuery|default('') }}" />
              {% endif %}
          </form>

          <nav>
            {% if is_granted("ROLE_USER") %}
                <div class="upload-button">
                  <a href="{{ path('upload.index') }}" class="button">Upload</a>
                </div>
                <a class="item {% if app.request.attributes.get('_route') == 'user.detail' and app.request.attributes.get('_route_params')['userId']|default('') == app.user.id %}active{% endif %}" href="{{ path('user.detail', {userId: app.user.id}) }}" title="My Profile">
                  <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ app.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                </a>
                {% if is_granted("ROLE_MODERATOR") or is_granted("ROLE_ADMIN") %}
                  <a class="item {% if 'moderation' in app.request.attributes.get('_route') %}active{% endif %}" href="{{ path('moderation.index') }}" title="Moderator Dashboard"><i class="mdi mdi-shield-outline"></i></a>
                {% endif %}
                <a class="item {% if app.request.attributes.get('_route') == 'user.settings' %}active{% endif %}" href="{{ path('user.settings') }}" title="Settings"><i class="mdi mdi-cog-outline"></i></a>
                <a class="item" href="{{ path('fos_user_security_logout') }}" title="Logout"><i class="mdi mdi-close-circle-outline"></i></a>
            {% else %}
                <a class="item" href="{{ path('fos_user_security_login') }}" title="Login/Register"><i class="mdi mdi-login-variant"></i></a>
            {% endif %}
          </nav>
        </aside>

        {% block content %}{% endblock %}
      </main>

      <!-- Scripts -->
      {% block scripts %}{% endblock %}

      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-167917395-1"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-167917395-1');
      </script>
    </body>
  </html>