{% 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()
    or user.is_board_member
    or user.is_in_group(name=settings.SITH_BAR_MANAGER_BOARD_GROUP)
    %}
        {# 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 %}
      {% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %}
        <div>
                    {# Shows tokens bought by the user #}
          {{ show_tokens(profile) }}
                    {# Shows slots took by the user #}
          {{ show_slots(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.can_read_subscription_history)%}
  <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>
{% endif %}

<hr>
<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>
    $(function () {
      var keys = [];
      var pattern = "71,85,89,71,85,89";
      $(document).keydown(function (e) {
        keys.push(e.keyCode);
        if (keys.toString() == pattern) {
          keys = [];
          $("#big_picture img").attr("src", "{{ static('core/img/yug.jpg') }}");
        }
        if (keys.length == 6) {
          keys.shift();
        }
      });
    });
    $(function () {
      $("#small_pictures img").click(function () {
        $("#big_picture img").attr("src", $(this)[0].src);
        $("#big_picture img").attr("alt", $(this)[0].alt);
        $("#big_picture img").attr("title", $(this)[0].title);
      })
    });
    $(function () {
      $("#drop_gifts").accordion({
        heightStyle: "content",
        collapsible: true,
        active: false
      });
    });
  </script>
{% endblock %}