{% extends base_template|default:"userextensions/userextensions_base.htm" %}
{% load staticfiles %}

{% block content %}
<div class="container-fluid mb-5 animated fadeIn">
    <h1 class="text-primary"><b>User Profile: </b><span class="text-secondary"><small>{{ user.username }}</small></span></h1>
</div>

<div class="container-fluid pl-5 pr-5">

    <!-- user details -->
    <div class="row mb-5 animated fadeIn" style="animation-delay: .15s;">
        <div class="col-sm-12 col-md-3 col-lg-2 mb-3 pl-0">
            <i class="far fa-address-card fa-6x text-primary"></i><br/>
        </div>

        <div class="col-sm-12 col-md-9 col-lg-10">
            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Is Active: </div>
                <div class="col-sm-9">
                    {% if user.is_active %}
                    <span class="badge badge-pill badge-primary"><i class="fa fa-check fa-fw"></i></span>
                    {% else %}
                    <span class="badge badge-pill badge-danger"><i class="fa fa-times fa-fw"></i></span>
                    {% endif %}
                </div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Is Staff: </div>
                <div class="col-sm-9">
                    {% if user.is_staff %}
                    <span class="badge badge-pill badge-primary"><i class="fa fa-check fa-fw"></i></span>
                    {% else %}
                    <span class="badge badge-pill badge-danger"><i class="fa fa-times fa-fw"></i></span>
                    {% endif %}
                </div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Is Superuser: </div>
                <div class="col-sm-9">
                    {% if user.is_superuser %}
                    <span class="badge badge-pill badge-primary"><i class="fa fa-check fa-fw"></i></span>
                    {% else %}
                    <span class="badge badge-pill badge-danger"><i class="fa fa-times fa-fw"></i></span>
                    {% endif %}
                </div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Date Joined: </div>
                <div class="col-sm-9">{{ user.date_joined }}</div>
            </div>

            <div class="row p-2">
                <div class="col-sm-3 font-weight-bold text-primary">API Token: </div>
                <div class="col-sm-9">
                    {{ token }} &nbsp;&nbsp;
                    <a href="#" title="refresh token"
                       onClick="confirmAction('{% url "userextensions:refresh_api_token" %}', 'Update Token', 'This will delete your API token and create a new one. Do you wish to continue?', 'Continue', 'POST');"
                    role="button" data-toggle="tooltip" data-placement="left">
                    <i class="fas fa-sync-alt"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>

    <!-- user profile -->
    <div class="row mb-5 animated fadeIn" style="animation-delay: .3s;">
        <div class="col-sm-12 col-md-3 col-lg-2 mb-3 pl-0">
            <i class="fas fa-cogs fa-6x text-primary"></i><br/>
        </div>

        <div class="col-sm-12 col-md-9 col-lg-10">
            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Theme: </div>
                <div class="col-sm-9">{{ user.preference.theme }}</div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Recents Count: </div>
                <div class="col-sm-9">{{ user.preference.recents_count }}</div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Page Refresh: </div>
                <div class="col-sm-9">{{ user.preference.page_refresh_time }}</div>
            </div>

            <div class="row border-bottom border-secondary p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Start Page: </div>
                <div class="col-sm-9"><a href="{{ user.preference.start_page }}">{{ user.preference.start_page }}</a></div>
            </div>

            <div class="row p-2">
                <div class="col-sm-3 font-weight-bold text-primary">Edit: </div>
                <div class="col-sm-9">
                    <a href="#" class="no-underline" data-toggle="modal" data-target="#modal_{{ form_data_user_preferences.modal_name }}">
                        <i class="fas fa-edit"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>

    <!-- groups -->
    <div class="row mb-5 animated fadeIn" style="animation-delay: .45s;">
        <div class="col-sm-12 col-md-3 col-lg-2 mb-3 pl-0">
            <i class="fas fa-users fa-6x text-primary"></i><br/>
        </div>

        <div class="col-sm-12 col-md-9 col-lg-10">
            <div class="row">
                {% if groups %}
                {% for group in groups %}
                <div class="col-sm-12 col-md-8 col-lg-4">{{ group }}</div>
                {% endfor %}
                {% else %}
                <div>no group memberships found</div>
                {% endif %}
            </div>
        </div>
    </div>

</div>

{% with form_data_user_preferences as form_data %}
    {% include 'handyhelpers/generic/generic_modal_form.htm' %}
{% endwith %}

<div class="m-5">&nbsp;</div>
{% include 'handyhelpers/component/modals.htm' %}

{% endblock content %}
