{% extends '/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left.css') }}" media="screen and (min-width: 1300px)">
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_mid.css') }}" media="screen and (max-width: 1300px)">
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/left/left_small.css') }}" media="screen and (max-width: 750px)">
{% endblock %}

{% block left %}
  {% if app.user %}
    <div id='left-panel'>
      <input type="checkbox" id="toggle" class="larger" autofocus>
        <div class="icon-menu">
          <label for="toggle" id='menu' tabindex="0"></label>
        </div>
        <div class='navbar'>
          <div class="left-nav">
            <hr>
              <div class='profile'>
                <a href="{{ path('settings_avatar') }}">
                  <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
                </a>
                <a href="{{ path('settings_personal_info') }}">
                  <div class="info">
                    <b id="nick">{{ user_nickname }}</b>
                    <div class="tags">
                      {% if user_tags %}
                        {% for tag in user_tags %}
                          <a href='#'><i> #{{ tag }} </i></a>
                        {% endfor %}
                      {% else %}
                        <i> {{ '(No tags)' | trans }} </i>
                      {% endif %}
                    </div>
                    <div class="stats">
                      <span> <b> {{ user_followers }} </b> {{'Followers' | trans}} </span>
                      <span> <b> {{ user_followed }} </b> {{'Followed' | trans}} </span>
                    </div>
                  </div>
                </a>
              </div>
              <a href='#'>Bookmarks</a>
              <a href='#'>Happenings</a>
              <a href='#'>Messages</a>
              <a href='#'>Replies</a>
              <a href='#'>Favourites</a>
              <a href='#'>Reverse Favs</a>
              <a href="{{ path('settings_personal_info') }}" class='hover-effect {{ active('settings_') }}'>Settings</a>
              <a href='#'>Logout</a>
          </div>
          <div class="footer">
            <a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
            <a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
            <a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
            <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
            <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
          </div>
        </div>
    </div>
  {% else %}
    <div id='left-panel'>
      <input type="checkbox" id="toggle">
        <div class="icon-menu">
          <label for="toggle" id='menu'></label>
        </div>
        <div class='navbar'>
          <div class="left-nav">
            <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
            <a href="{{ path('register') }}">Register</a>
          </div>
          <div class="footer">
            <a href="{{ path('doc_faq') }}" class='hover-effect {{ active('doc_faq') }}'>FAQ</a>
            <a href="{{ path('doc_tos') }}" class='hover-effect {{ active('doc_tos') }}'>TOS</a>
            <a href="{{ path('doc_privacy') }}" class='hover-effect {{ active('doc_privacy') }}'>Privacy</a>
            <a href="{{ path('doc_source') }}" class='hover-effect {{ active('doc_source') }}'>Source</a>
            <a href="{{ path('doc_version') }}" class='hover-effect {{ active('doc_version') }}'>Version</a>
          </div>
        </div>
    </div>
  {% endif %}

{% endblock %}