{% extends "base.html" %}
{% load url from future %}
{% load thumbnail %}

{% block breadcrumb %}{% endblock %}

{% block title %}Profile - {{ profile.full_name }}{% endblock %}
{% block bodyclass %}profile-page{% endblock %}

{% block content %}

<div class="profile">
    {% block page_title %}
    {% if profile_form %}
        <div class="title">Edit Profile</div>
    {% else %}
        {% if profile.user == request.user %}
            <div class="title">View Profile
                {% if profile.user == request.user %}
                    <span class="edit">
                        | <a href="{% url 'accounts:change_profile' %}">Edit Profile</a>
                    </span>
                {% endif %}
            </div>
        {% else %}
            <h1>Profile</h1>
        {% endif %}
    {% endif %}
    {% endblock %}


    <div class='profile-pic'>
        <div class="left">
        {% if profile.picture %}
            {% if profile.user == request.user %}
                <a href="{% url 'accounts:change_profile' %}">
                    <img src = '{{ MEDIA_URL }}{{ profile.picture }}' id = 'profile-pic'>
                </a>
            {% 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>
            {% endif %}
        {% endif %}
        </div>
    </div>

    <div class="right">
        <div id = 'profile-wrapper'>
            {% comment %}
            <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>
            {% endcomment %}

            <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>
    </div>
</div>
{% endblock %}

{% block script %}
    <link href="{{ STATIC_URL}}css/bootstrap.css" type="text/css" media="all" rel="stylesheet">
    <link href="{{ STATIC_URL}}css/token-input-mac.css" type="text/css" media="all" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL}}js/jquery.tokeninput.js"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>

    <script>
        $(document).ready(function(){ 
             $("#id_majors").tokenInput("{% url 'taggit:autocomplete' %}", {
                {% if profile.majors %}
                    prePopulate: [
                    {% for major in profile.majors.all %}
                        { id: {{ major.id }}, name: '{{ major.name }}' } {% if not forloop.last %},{% endif %}
                    {% endfor %}
                    ],
                {% endif %}
                hintText: "Type in the topics covered by this post",
                noResultsText: "No previous topic matching your query",
                searchingText: "Searching for previously defined topics...",
                theme: 'mac',
                preventDuplicates: true,
                allowCreation: true
            });
        
            var Job = [
            {% for job in jobs %}
                '{{ job }}' {% if not forloop.last %},{% endif %}
            {% endfor %}
            ].sort();
            $('#id_job').typeahead({source: Job, items:5});
        });
    </script>
{% endblock %}