<!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>
          <nav class="items-left">
            <div class="logo">
              <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
            </div>
            <a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}"><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 class="items-right">
            {% if is_granted("ROLE_USER") %}
                <div class="upload-button">
                  <a href="{{ path('upload.index') }}" class="button">Upload</a>
                </div>
                {# <div class="item item-notifications" tabindex="0">
                  <i class="mdi mdi-bell"></i>
                  <div class="indicator">2</div>
                  
                  <div class="notification-box">
                    <header>
                      <span>Notifications</span>
                      <div class="button">Clear all</div>
                    </header>
                    <div class="notification-list">
                      <a href="{{ path('index.index') }}" class="notification-item">
                        <div class="notification-icon">
                          <i class="mdi mdi-server"></i>
                        </div>
                        <div class="notification-text">
                          Hello! This is your first notification!
                        </div>
                      </a>
                      <a href="{{ path('index.index') }}" class="notification-item">
                        <div class="notification-icon">
                          <div class="cover" style="background-image: url(/www/spinshare/server/public/uploads/thumbnail/spinshare_5ea59d9ff2be9.jpg?v=1595247910), url(/www/spinshare/server/public/assets/img/defaultAlbumArt.jpg);"></div>
                        </div>
                        <div class="notification-text">
                          <strong>taw</strong> reviewed your chart <strong>Xenoblade Chronicles Medley (Tournament Edit)</strong>.
                        </div>
                      </a>
                      <a href="{{ path('index.index') }}" class="notification-item">
                        <div class="notification-icon">
                          <div class="cover" style="background-image: url(/www/spinshare/server/public/uploads/thumbnail/spinshare_5ea59d9ff2be9.jpg?v=1595247910), url(/www/spinshare/server/public/assets/img/defaultAlbumArt.jpg);"></div>
                        </div>
                        <div class="notification-text">
                          <strong>taw</strong> added a SpinPlay to your chart <strong>Xenoblade Chronicles Medley (Tournament Edit)</strong>.
                        </div>
                      </a>
                    </div>
                  </div>
                </div> #}
                <div class="item item-user" tabindex="0">
                  <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ app.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
                  <div class="user-actions">
                    <a href="{{ path('user.detail', {userId: app.user.id}) }}" class="user-action-item">
                      <i class="mdi mdi-account"></i>
                      <span>My Profile</span>
                    </a>
                    <a href="{{ path('user.settings') }}" class="user-action-item">
                      <i class="mdi mdi-cog"></i>
                      <span>Settings</span>
                    </a>
                    {% if is_granted("ROLE_MODERATOR") or is_granted("ROLE_ADMIN") %}
                      <a href="{{ path('moderation.index') }}" class="user-action-item">
                        <i class="mdi mdi-police-badge"></i>
                        <span>Moderator Dashboard</span>
                      </a>
                    {% endif %}
                    <a href="{{ path('fos_user_security_logout') }}" class="user-action-item">
                        <i class="mdi mdi-close-circle-outline"></i>
                      <span>Logout</span>
                    </a>
                  </div>
                </div>
            {% 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 %}
      <script src="{{ asset('assets/js/notifications.js') }}"></script>

      <!-- 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>