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

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

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

{% block additional_js %}
    <script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
{% 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 fa-trash"></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 %}