<!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.4.55/css/materialdesignicons.min.css" />
      <link rel="stylesheet" href="{{ asset('assets/css/main.css?v=' ~ date().timestamp) }}" />
      {% if is_granted("ROLE_USER") %}
        {% if app.user.theme == 1 %}
          <link rel="stylesheet" href="{{ asset('assets/css-theme1/main.css?v=' ~ date().timestamp) }}" />
        {% endif %}
      {% endif %}
      {% block styles %}{% endblock %}
    </head>
    <body>
      <main>
        <aside>
          <nav class="items-left">
            <div class="logo">
              {% if is_granted("ROLE_USER") %}
                {% if app.user.theme == 1 %}
                  <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_onwhite.svg') }}" alt="SpinShare Logo" /></a>
                {% else %}
                  <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
                {% endif %}
              {% else %}
                <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
              {% endif %}
            </div>
            <a class="item {% if app.request.attributes.get('_route') == 'index.index' or app.request.attributes.get('_route') == 'index.new' or app.request.attributes.get('_route') == 'index.hot' or app.request.attributes.get('_route') == 'index.popular' %}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" href="{{ path('api.docs.introduction') }}" title="API Documentation"><i class="mdi mdi-api"></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">
            <input name="q" type="search" placeholder="Search for songs, tags & profiles..." value="{{ searchQuery|default('') }}" />
            <input type="hidden" name="diffEasy" value="on" />
            <input type="hidden" name="diffNormal" value="on" />
            <input type="hidden" name="diffHard" value="on" />
            <input type="hidden" name="diffExpert" value="on" />
            <input type="hidden" name="diffXD" value="on" />
            <input type="hidden" name="diffRatingFrom" value="0" />
            <input type="hidden" name="diffRatingTo" value="99" />
          </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>
                  {% if app.user.userNotifications|length > 0 %}
                    <div class="indicator">{{ app.user.userNotifications|length }}</div>
                  {% endif %}
                  
                  <div class="notification-box">
                    <header>
                      <span>Notifications</span>
                      <a href="{{ path('notification.clear.all', {returnUrl: app.request.uri}) }}" class="button">Clear all</a>
                    </header>
                    <div class="notification-list">
                      {% for notification in app.user.userNotifications|reverse %}
                        <a href="{{ path('notification.clear', {notificationID: notification.id, returnUrl: app.request.uri}) }}" class="notification-item">
                          <div class="notification-icon">
                            {% if notification.notificationType == 0 %}
                              <i class="mdi mdi-server"></i>
                            {% elseif notification.notificationType == 3 %}
                              <div class="cover" style="background-image: url({{ asset("uploads/card/" ~ notification.connectedCard.icon) }});"></div>
                            {% else %}
                              <div class="cover" style="background-image: url({{ asset("uploads/thumbnail/" ~ notification.connectedSong.fileReference ~ ".jpg?v=" ~ date().timestamp) }}), url({{ asset("assets/img/defaultAlbumArt.jpg") }});"></div>
                            {% endif %}
                          </div>
                          <div class="notification-text">
                          {% if notification.notificationType == 0 %}
                            {{ notification.notificationData }}
                          {% elseif notification.notificationType == 1 %}
                            <strong>{{ notification.connectedUser.username }}</strong> reviewed your chart <strong>{{ notification.connectedSong.title }}</strong>.
                          {% elseif notification.notificationType == 2 %}
                            <strong>{{ notification.connectedUser.username }}</strong> added a SpinPlay to your chart <strong>{{ notification.connectedSong.title }}</strong>.
                          {% elseif notification.notificationType == 3 %}
                            You've received the profile card <strong>{{ notification.connectedCard.title }}</strong>.
                          {% endif %}
                          </div>
                        </a>
                      {% endfor %}
                    </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, area: "charts"}) }}" class="user-action-item">
                      <i class="mdi mdi-music"></i>
                      <span>My Charts</span>
                    </a>
                    <a href="{{ path('user.detail', {userId: app.user.id, area: "playlists"}) }}" class="user-action-item">
                      <i class="mdi mdi-playlist-music"></i>
                      <span>My Playlists</span>
                    </a>
                    <a href="{{ path('user.detail', {userId: app.user.id, area: "reviews"}) }}" class="user-action-item">
                      <i class="mdi mdi-thumbs-up-down"></i>
                      <span>My Reviews</span>
                    </a>
                    <a href="{{ path('user.detail', {userId: app.user.id, area: "spinplays"}) }}" class="user-action-item">
                      <i class="mdi mdi-youtube"></i>
                      <span>My SpinPlays</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>