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

{% block breadcrumb %}{% endblock %}

{% block title %}{{ profile.first_name }} {{ profile.last_name }}{% 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 '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 'accounts:change_profile' %}">
        <img src = '{{ STATIC_URL }}img/mugshot_default.jpg' id = 'profile-pic'>
    </a>
    {% else %}
        <img src = '{{ STATIC_URL }}img/mugshot_default.jpg' id = 'profile-pic'>
    {% endif %}
{% endif %}

{% if picture_form %}
    {% if profile.mugshot %}
    <div class='delete'><a href="{% url 'accounts:delete_picture' %}"><img src='{{ STATIC_URL }}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.full_name '' %}</h4>
    <ul class="tabs">
        <li>
            <h4>
            <a href="{% url 'accounts:detail'%}" {% if profile and not password_form %} class = "current" {% endif %}>
            <span>Profil</span></a></h4>
        </li>
        <li><h4><a href="{% url 'accounts:change_password'%}" {% if password_form %} class = "current" {% endif %}>
            <span>Password</span></a></h4>
        </li>
    </ul>

    <div class="panes">
        {% if profile and not password_form %}
        <div class = 'pane'>
            {% if profile_form %}
                {% include 'website/accounts/change_profile_form.html' %}
            {% else %}
                {% include 'website/accounts/detail.html' %}
            {% endif %}
        </div>
        {% endif %}
        
        {% if password_form %}
        <div class = 'pane changepassword_pane'>
            {% if password_form %}
                {% include 'website/accounts/change_email_password_form.html' %}
            {% endif %}
        </div>
        {% endif %}
    </div>

</div>
    

{% endblock %}