{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/shared/kawaiibeats.css' %}">
{% endblock head %}

<div class="right-sidebar">
  <div class="kawaiibeats">
      <p id="song-title">Loading...</p>
      <p id="song-artist-album">Loading...</p>
      <img onerror="this.src=getRandomArtwork()" id="song-cover" alt="Song Cover">
      <canvas id="song-visualizer" width="140" height="30"></canvas>
      <div id="song-time">
        <span id="song-time-elapsed">0:00</span>
        <span id="song-time-total">0:00</span>
      </div>
      <div id="song-controls">
          <button id="song-prev">&lt;</button>
          <button id="song-play">&#9658;</button>
          <button id="song-next">&gt;</button>
      </div>
  </div>

  <div class="navigation-links">
    <div class="navigation-title-container">
      <h1 class="navigation-title">{% if request.LANGUAGE_CODE == 'ja' %}シリアルエクスペリメンツ：シフー{% else %}Serial Experiments: Shifoo{% endif %}</h1>
    </div>
    <div class="navigation-items-container">
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/socialify.png' %}" alt="Socialify Icon" />
        <a href="#socialify">{% if request.LANGUAGE_CODE == 'ja' %}ソーシャリファイ{% else %}Socialify{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/repositories.png' %}" alt="My Repositories Icon" />
        <a href="#repositories">{% if request.LANGUAGE_CODE == 'ja' %}マイリポジトリ{% else %}My Repositories{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/myanimelist.png' %}" alt="My Anime List Icon" />
        <a href="#myanimelist">{% if request.LANGUAGE_CODE == 'ja' %}マイアニメリスト{% else %}My Anime List{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/games.png' %}" alt="My Games Icon" />
        <a href="#mygames">{% if request.LANGUAGE_CODE == 'ja' %}マイゲーム{% else %}My Games{% endif %}</a>
      </div>
    </div>
  </div>
  <div class="pamphlet pamphlet-big"></div>

  {% if user.is_authenticated %}
  <div class="user-stats-area">
    <img src="{% static 'images/avatars/' %}{{ user.profile.avatar_url }}.gif" class="stats-profile-image" alt="{{ user.first_name }}'s Avatar">
    <h2 class="stats-username"><a href="#">{{ user.first_name }} {{ user.last_name }}</a></h2>
    <p class="stats-bio">{{ user.profile.bio|linebreaksbr }}</p>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}経験値{% else %}XP{% endif %}</p>
      <p class="stat-value">{{ user.profile.experience }} / 1000</p>
    </div>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}レベル{% else %}Level{% endif %}</p>
      <p class="stat-value">{{ user.profile.level }}</p>
    </div>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}残高{% else %}Balance{% endif %}</p>
      <p class="stat-value">
        <span>{{ user.profile.balance }}</span>
        <img src="{% static 'images/core/icons/coin.png' %}" alt="Coin Icon" />
      </p>
    </div>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}ジャーナルエントリー{% else %}Journal Entries{% endif %}</p>
      <p class="stat-value">{{ user.profile.journal_entries }}</p>
    </div>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}ジャーナル連続記録{% else %}Journal Streak{% endif %}</p>
      <p class="stat-value">{{ user.profile.journal_streak }} days</p>
    </div>
    <div class="user-stats">
      <p class="stat-name">{% if request.LANGUAGE_CODE == 'ja' %}ウェブログ投稿{% else %}Weblog Posts{% endif %}</p>
      <p class="stat-value">{{ user.profile.weblogs_created }}</p>
    </div>
    <div class="stat-links">
      <a href="#">{% if request.LANGUAGE_CODE == 'ja' %}ドレッシングルーム{% else %}Dressing Room{% endif %}</a>
      <a href="#">{% if request.LANGUAGE_CODE == 'ja' %}実績{% else %}Achievements{% endif %}</a>
      <a href="#">{% if request.LANGUAGE_CODE == 'ja' %}ウェブログ{% else %}Weblog{% endif %}</a>
    </div>
  </div>

  {% endif %}

  <div class="navigation-links">
    <div class="navigation-title-container">
      <h1 class="navigation-title">{% if request.LANGUAGE_CODE == 'ja' %}ザ・マトリックス{% else %}The Matrix{% endif %}
    </div>
    <div class="navigation-items-container">
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/pamphlet.png' %}" alt="Pamphlet Icon" />
        <a href="#pamphlet">{% if request.LANGUAGE_CODE == 'ja' %}パンフレット{% else %}Pamphlet{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/webring.png' %}" alt="Caravan Icon" />
        <a href="#webring">{% if request.LANGUAGE_CODE == 'ja' %}キャラバン{% else %}Caravan{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/guestbook.png' %}" alt="Ledger Icon" />
        <a href="#guestbookservice">{% if request.LANGUAGE_CODE == 'ja' %}レジャー{% else %}Ledger{% endif %}</a>
      </div>
      <div class="navigation-item">
        <img src="{% static 'images/core/icons/census.png' %}" alt="Census Icon" />
        <a href="#census">{% if request.LANGUAGE_CODE == 'ja' %}センサス{% else %}Census{% endif %}</a>
      </div>
    </div>
  </div>
  <div class="sidebar-credits" id="censusContainer">
      <div class="visitor-text">You are Visitor #</div>
      <div class="visitor-count">
        <span class="visitor-count-item">0</span>
        <span class="visitor-count-item">0</span>
        <span class="visitor-count-item">6</span>
        <span class="visitor-count-item">9</span>
        <span class="visitor-count-item">4</span>
        <span class="visitor-count-item">2</span>
        <span class="visitor-count-item">0</span>
      </div>
    </div>
</div>

{% block scripts %}
<script src="{% static 'js/shared/kawaiiBeatsPlayer.js' %}"></script>
{% endblock scripts %}