{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import show_slots, show_tokens, user_subscription %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('user/user_detail.scss') }}">
{%- endblock -%}

{% block title %}
  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s profile{% endtrans %}
{% endblock %}

{% block content %}
  <div class="user_profile_page" x-data>
    <div class="user_profile">
        <!-- Profile -->
      <div class="user-name">
        <h3>{{ profile.get_full_name() }}</h3>
        {% if profile.nick_name %}
          <div class="user_profile_infos_nick">&laquo; {{ profile.nick_name }} &raquo;</div>
        {% endif %}
      </div>

      <div class="infos-and-picture">
        <div class="user_profile_infos">
          {% if profile.quote %}
            <div class="user_profile_infos_quote">
              {{ profile.quote }}
            </div>
          {% endif %}

          <div class="user_profile_infos_items">
            {% if profile.pronouns %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Pronouns: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.pronouns }}</span>
              </div>
            {% endif %}
            {% if profile.date_of_birth %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Born: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.date_of_birth|date("d/m/Y") }}</span>
              </div>
            {% endif %}

            {% if profile.department != "NA" %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Department: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.department }}{{ profile.semester
                  }}</span>
              </div>
            {% endif %}

            {% if profile.dpt_option %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Option: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.dpt_option }}</span>
              </div>
            {% endif %}

            {% if profile.phone %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Phone: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.phone }}</span>
              </div>
            {% endif %}

            {% if profile.address %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Address: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.address }}</span>
              </div>
            {% endif %}

            {% if profile.parent_address %}
              <div>
                <span class="user_profile_infos_item">{% trans %}Parents address: {% endtrans %}</span>
                <span class="user_profile_infos_item_value">{{ profile.parent_address }}</span>
              </div>
            {% endif %}
          </div>

          {% if profile.promo %}
            <br>
            <div class="user_profile_infos_promo">
              {% trans %}Promo: {% endtrans %}{{ profile.promo }}
              {% if profile.promo_has_logo() %}
                <img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}" alt="Promo {{ profile.promo }}" />
              {% else %}
                <div>
                  <span>¯\_(ツ)_/¯</span>
                </div>
              {% endif %}
            </div>
          {% endif %}
        </div>
            <!-- Pictures -->
        <div class="user_profile_pictures">
          <div class="user_profile_pictures_bigone" id="big_picture">
            {% if profile.profile_pict %}
              <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
                   title="{% trans %}Profile{% endtrans %}" />
            {% else %}
              <img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}"
                   title="{% trans %}Profile{% endtrans %}" />
            {% endif %}
          </div>
          <div class="user_profile_pictures_thumbnails" id="small_pictures">
            {% if profile.profile_pict %}
              <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
                   title="{% trans %}Profile{% endtrans %}" />
            {% else %}
              <img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}"
                   title="{% trans %}Profile{% endtrans %}" />
            {% endif %}

            {% if profile.avatar_pict %}
              <img src="{{ profile.avatar_pict.get_download_url() }}" alt="{% trans %}Avatar{% endtrans %}"
                   title="{% trans %}Avatar{% endtrans %}" />
            {% else %}
              <img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Avatar{% endtrans %}"
                   title="{% trans %}Avatar{% endtrans %}" />
            {% endif %}

            {% if profile.scrub_pict %}
              <img src="{{ profile.scrub_pict.get_download_url() }}" alt="{% trans %}Scrub{% endtrans %}"
                   title="{% trans %}Scrub{% endtrans %}" />
            {% else %}
              <img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Scrub{% endtrans %}"
                   title="{% trans %}Scrub{% endtrans %}" />
            {% endif %}
          </div>
        </div>
      </div>
    </main>
    {% if user == profile or user.memberships.ongoing().exists() %}
      {# if the user is member of a club, he can view the subscription state #}
      <hr>
      {% if profile.is_subscribed %}
        {% if user == profile or user.is_root or user.is_board_member %}
          <div>
            {{ user_subscription(profile) }}
          </div>
        {% endif %}
      {% else %}
        <div>
          {% trans %}Not subscribed{% endtrans %}
          {% if user.is_board_member %}
            <a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">
              {% trans %}New subscription{% endtrans %}
            </a>
          {% endif %}
      {% endif %}
      </div>
    {% endif %}
    <br>
    {% if profile.was_subscribed and (user == profile or user.has_perm("subscription.view_subscription")) %}
      <div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
        <div class="collapse-header clickable" @click="collapsed = !collapsed">
          <span class="collapse-header-text">
            {% trans %}Subscription history{% endtrans %}
          </span>
          <span class="collapse-header-icon" :class="{'reverse': collapsed}">
            <i class="fa fa-caret-down"></i>
          </span>
        </div>
        <div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top>
          <table>
            <thead>
              <tr>
                <th>{% trans %}Subscription start{% endtrans %}</th>
                <th>{% trans %}Subscription end{% endtrans %}</th>
                <th>{% trans %}Subscription type{% endtrans %}</th>
                <th>{% trans %}Payment method{% endtrans %}</th>
              </tr>
            </thead>
            {% for sub in profile.subscriptions.all() %}
              <tr>
                <td>{{ sub.subscription_start }}</td>
                <td>{{ sub.subscription_end }}</td>
                <td>{{ sub.subscription_type }}</td>
                <td>{{ sub.get_payment_method_display() }}</td>
              </tr>
            {% endfor %}
          </table>
        </div>
      </div>
      <hr>
    {% endif %}

    <div>
      {% if user.is_root or user.is_board_member %}
        <form class="form-gifts" action="{{ url('core:user_gift_create', user_id=profile.id) }}" method="post">
          {% csrf_token %}
          {{ gift_form.label }}
          {{ gift_form.user }}
          <input type="submit" value="{% trans %}Give gift{% endtrans %}">
        </form>
        {% if profile.gifts.exists() %}
          {% set gifts = profile.gifts.order_by("-date")|list %}
          <br>
          <div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
            <div class="collapse-header clickable" @click="collapsed = !collapsed">
              <span class="collapse-header-text">
                {% trans %}Last given gift :{% endtrans %} {{ gifts[0] }}
              </span>
              <span class="collapse-header-icon" :class="{'reverse': collapsed}">
                <i class="fa fa-caret-down"></i>
              </span>
            </div>
            <div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top>
              <ul>
                {% for gift in gifts %}
                  <li>{{ gift }}
                    <a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}">
                      <i class="fa-solid fa-trash-can delete-action"></i>
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </div>
        {% else %}
          <em>{% trans %}No gift given yet{% endtrans %}</em>
        {% endif %}
        </div>
      {% endif %}
    </div>


{% endblock %}

{% block script %}
  {{ super() }}
  <script>
    // Image selection
    for (const img of document.querySelectorAll("#small_pictures img")){
      img.addEventListener("click", (e) => {
        const displayed = document.querySelector("#big_picture img");
        displayed.src = e.target.src;
        displayed.alt = e.target.alt;
        displayed.title = e.target.title;
      })
    }

    let keys = [];
    const pattern = "71,85,89,71,85,89";

    document.addEventListener("keydown", (e) => {
      keys.push(e.keyCode);
      if (keys.toString() === pattern) {
        keys = [];
        document.querySelector("#big_picture img").src = "{{ static('core/img/yug.jpg') }}";
      }
      if (keys.length === 6) {
        keys.shift();
      }
    });
  </script>
{% endblock %}