{% extends "base/base.html" %}
{% load crispy_forms_tags %}
{% load staticfiles %}
{% load gravatar %}

{% block css %}
{% include "style/sliders.html" %}
<link rel="stylesheet" href="{% static "css/material-table.css"%}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<style>
.btn-sm {
  margin-top:20px !important;
}
.active {
    font-weight:400;
}
</style>
{% if 'globus' in PLUGINS_ENABLED %}
    <link rel="stylesheet" href="{% static "css/globus_auth.css"%}">
{% endif %}
{% endblock %}

{% block content %}
{% include "messages/message.html" %}

<div id="fh5co-portfolio">

<div class="row">
    <div class="col-md-12">
        <div style="padding: 50px 0px 30px;">
            <div class="header">
                 <h3 class="title">{{ profile.username }}
                     <a href="https://www.github.com/{{ profile.username }}" target="_blank"><i style="padding-left:25px; float:right; font-size:30px" class="fa fa-github"></i></a>
                  </h3>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <ul class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <li class="active"><a data-toggle="pill" id="pill-profile" href="#profile">User Profile</a></li>
            <li><a data-toggle="pill" id="pill-collections" href="#collections">Collections</a></li>
            <li><a data-toggle="pill" id="pill-favorites" href="#favorites">Favorites</a></li>
            <li><a data-toggle="pill" id="pill-danger" href="#integrations">Integrations</a></li>
            {% if request.user.is_authenticated %}{% if request.user.username == profile.username %}
            <li><a data-toggle="pill" id="pill-danger" href="#account">Account</a></li>
            {% endif %}{% endif %}
            {% if request.user.is_superuser %}<li><a id="pill-admin" target="_blank" href="{% url 'admin:index' %}">Admin</a></li>
{% endif %}
        </ul>
    </div>
    <div class="col-md-1"></div>
    <div class="col-md-8">
        <div style="float:right">
            <a href="https://www.github.com/{{ profile.username }}" target="_blank">
            {% gravatar profile.email 100 %}</a>
        </div>
        <div class="tab-content">
            <div id="profile" class="tab-pane fade in active">
               {% include "users/_profile_settings.html" %}
            </div>
            <div id="collections" class="tab-pane fade">
               {% include "users/_profile_collections.html" %}
            </div>
            <div id="favorites" class="tab-pane fade">
               {% include "users/_profile_favorites.html" %}
            </div>
            <div id="integrations" class="tab-pane fade">
               {% include "users/_profile_integrations.html" %}
            </div>{% if request.user.username == profile.username %}
            <div id="account" class="tab-pane fade">
               {% include "users/_profile_admin.html" %}
            </div>{% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static "js/jquery.dataTables.min.js"%}"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script src="{% static "js/materialize.min.js"%}"></script>
<script src="{% static "js/material.datatables.js"%}"></script>
<script src="{% static "js/ace.js"%}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "js/clipboard.min.js"%}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="{% static "js/cookie-token.js" %}"></script>
<script>

$(document).ready(function(){

    $('.gravatar').addClass('thumbnail');

    {% if active_tab %}
        $('#pill-{{ active_tab }}').click()    
    {% endif %}

    // Hack until figure out why pagination ugly
    $('.material-pagination').hide();

    $('input').on('keyup',function(){
        $('.material-pagination').hide();
    })

    $("#delete_account").click(function(){
        var response = confirm("Are you sure you want to delete your account?");
        if (response == true) {
           document.location = "{% url 'delete_account' %}";
        }
    })
 
    $(".browser-default").change(function(){
        $('.material-pagination').hide();
    })

})
</script>
{% endblock %}
