{% extends 'website/base.html' %}
{% load url from future %}
{% load fiber_tags thumbnail breadcrumb_tags %}

{% block breadcrumb %}{% endblock %}

{% block title %}{{ profile.first_name }}'s Profile{% endblock %}
{% block bodyclass %}profile-page{% endblock %}

{% block content %}

{% block page_title %}
{% if profile_form %}
    <h1>Ubah Profil</h1>
{% else %}
    {% if profile.user == request.user %}
        <h1>Profil Saya</h1>
    {% else %}
        <h1>Profil</h1>
    {% endif %}
{% endif %}
{% endblock %}

<div class='profile-pic'>
{% if profile.mugshot %}
    {% if profile.user == request.user %}
        <a href="{% url 'website:accounts:change_profile' %}">
            <img src = '{% thumbnail profile.mugshot 200x200 %}' id = 'profile-pic'>
        </a>
    {% else %}
        <img src = '{% thumbnail profile.mugshot 200x200 %}' id = 'profile-pic'>
    {% endif %}
{% else %}
    {% if profile.user == request.user %}
    <a href="{% url 'website:accounts:change_profile' %}">
        <img src = '{{ STATIC_URL }}website/img/mugshot_default.jpg' id = 'profile-pic'>
    </a>
    {% else %}
        <img src = '{{ STATIC_URL }}website/img/mugshot_default.jpg' id = 'profile-pic'>
    {% endif %}
{% endif %}

{% if picture_form %}
    {% if profile.mugshot %}
    <div class='delete'><a href="{% url 'website:accounts:delete_picture' %}"><img src='{{ STATIC_URL }}website/img/profile_icon_x.png' /><span> Hapus Foto</span></a></div>
    {% endif %}
    {% include 'website/accounts/change_picture_form.html' %}
{% endif %}

</div>
<div id = 'profile-wrapper'>
    <h4>{% firstof profile.first_name '' %} {% firstof profile.middle_name '' %} {% firstof profile.last_name '' %}</h4>
    {% if profile.nick_name %}
        <h6>{{ profile.nick_name }}</h6>
    {% endif %}
    {% if profile.user == user %}
        {% if not application.submitted %}
            {% if active_program %}
                <div class='reminder-box'>
                    <p>Pendaftaran ODP angkatan {{ active_program }} telah dibuka.</p>
                    <a href="{% url 'application_form_basic_info' %}" class = 'button'>
                    <span>
                        {% if application_exists %}
                            Lanjutkan
                        {% else %}
                            Daftar Menjadi ODP
                        {% endif %}
                    </span>
                    </a>
                </div>
            {% endif %}
        {% endif %}
    {% endif %}

    <ul class="tabs">
        <li><h4><a href="#"><span>Profil</span></a></h4></li>

        {% if email_form %}
        <li><h4><a href="#" {% if activate_2nd_pane %} class = "current" {% endif %}>
            <span>Email & Password</span></a></h4></li>
        {% endif %}

        {% if not hide_applications %}
            {% with request.user.applications.all as applications %}
                {% if applications %}
                    <li><h4><a href="#"><span>Riwayat Aplikasi</span></a></h4></li>
                {% endif %}
            {% endwith %}
        {% endif %}
    </ul>

    <div class="panes">

        <div class = 'pane'>
            {% if profile_form %}
                {% include 'website/accounts/change_profile_form.html' %}
            {% else %}
                {% include 'website/accounts/detail.html' %}
            {% endif %}
        </div>

        {% if email_form %}
        <div class = 'pane changepassword_pane'>
            {% if email_form %}
                {% include 'website/accounts/change_email_password_form.html' %}
            {% else %}
                {% include 'website/accounts/credential_detail.html' %}
            {% endif %}
        </div>
        {% endif %}

        {% if applications_history %}
                <div class = 'pane application_pane'>
                   <ul>
                        {% for application in applications_history %}
                            <li>
                            {% if application.submitted_date %}
                                <a href="{% url 'old_application_preview' application.program_id %}">
                                    {{ application }} ({{ application.get_status_display}})
                                </a>
                             {% else %}
                                    {{ application }} ({{ application.get_status_display}})
                             {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
        {% endif %}

        {% if donations or pledge %}
        <div class='pane donation_pane'>
            {% if donations %}
                {% include 'website/accounts/donation.html' %}
             {% else %}
                {% include 'website/accounts/donation_detail.html' %}
            {% endif %}
        </div>
        {% endif %}

        {% if activities %}
        <div class='pane activities_pane'>
           <ul>
                <li>
                    <div class="left">NAME</div>
                    <div class="right">DATE</div>
                </li>
                {% for activity in activities %}
                <li>
                    <div class="left">{{ activity }}</div>
                    <div class="right">{{ activity.date }}</div>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

</div>


{% endblock %}