{% extends "base.html" %}
{% load url %}
{% load bleach %}
{% load guardian_tags %}
{% load meta_attr %}
{% load evaluation_extras %}
{% load user_profile_link from profiles %}

{% block title %}
    {{ object.title }} - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'organizations:list' %}">Organizations</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ object.title }}</li>
    </ol>
{% endblock %}

{% block sidebar %}
    {% get_obj_perms request.user for object as "object_perms" %}

    <div class="col-12 col-md-4 col-lg-3 mb-3">
        <div class="nav nav-pills flex-column" id="v-pills-tab" role="tablist"
             aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill"
               href="#v-pills-home" role="tab" aria-controls="v-pills-home"
               aria-selected="true"><i
                    class="fas fa-info fa-fw"></i>&nbsp;Information
            </a>

            {% if "change_organization" in object_perms %}
                <a class="nav-link" id="v-pills-editors-tab" data-toggle="pill"
                   href="#v-pills-editors" role="tab" aria-controls="v-pills-editors"
                   aria-selected="false"><i class="fas fa-user fa-fw"></i>&nbsp;Editors
                </a>
                <a class="nav-link" id="v-pills-members-tab" data-toggle="pill"
                   href="#v-pills-members" role="tab" aria-controls="v-pills-members"
                   aria-selected="false"><i class="fas fa-users fa-fw"></i>&nbsp;Members
                </a>
                <a class="nav-link"
                   href="{% url 'organizations:update' slug=object.slug %}">
                    <i class="fa fa-edit fa-fw"></i>&nbsp;Edit Organization
                </a>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block content %}
    {% get_obj_perms request.user for object as "object_perms" %}

    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
             aria-labelledby="v-pills-home-tab">

            <h2>{{ object.title }}</h2>

            {{ object.detail_page_markdown|md2html }}

            <dl class="row">
                <dt class="col-sm-3 mt-2"><i class="fa fa-fw fa-map-marker-alt"></i>&nbsp;Location</dt>
                <dd class="col-sm-9 mt-2">{{ object.location.name }}</dd>

                <dt class="col-sm-3 mt-2"><i class="fa fa-fw fa-link"></i>&nbsp;Website</dt>
                <dd class="col-sm-9 mt-2"><a href="{{ object.website }}">{{ object.website }}</a></dd>

                {% if object.editors_group.user_set.all %}
                    <dt class="col-sm-3 mt-2"><i class="fa fa-fw fa-users"></i>&nbsp;Editors</dt>
                    <dd class="col-sm-9 mt-2">{% for editor in object.editors_group.user_set.all %}<p>{{ editor|user_profile_link }}</p>{% endfor %}</dd>
                {% endif %}

            </dl>

            <h3>Activity Overview</h3>
            <div class="row equal-height mx-n2">
                {% for object in object_list %}
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4 mb-3 px-2">
                        <div class="card gc-card">
                            <a class="stretched-link" href="{{ object.get_absolute_url }}"
                               title="View {{ object|meta_attr:'verbose_name'|title }}"></a>
                            <div class="embed-responsive embed-responsive-1by1">
                                {% if object.logo %}
                                    <img class="card-img-top embed-responsive-item"
                                         loading="lazy"
                                         src="{{ object.logo.x20.url }}"
                                         srcset="{{ object.logo.x10.url }} 1x,
                                                 {{ object.logo.x15.url }} 1.5x,
                                                 {{ object.logo.x20.url }} 2x"
                                         alt="{{ object }} Logo">
                                {% endif %}
                            </div>
                            <div class="card-body">
                                <h5 class="card-title mb-0">
                                    {% firstof object.title object.short_name %}
                                    {% if not object.public or object.hidden %}
                                        <i class="fas fa-lock above-stretched-link"
                                           title="{{ object|meta_attr:'verbose_name'|title }} is private"></i>
                                    {% endif %}
                                </h5>
                                <span class="badge badge-info above-stretched-link"
                                      title="{{ object|meta_attr:'verbose_name'|title }} {% firstof object.title object.short_name %}">
                                    <i class="far fa-circle fa-fw"></i>&nbsp;{{ object|meta_attr:'verbose_name'|title }}
                                </span>
                                <p class="card-text">
                                    {{ object.description }}
                                </p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        {% if "change_organization" in object_perms %}
            <div class="tab-pane fade" id="v-pills-editors" role="tabpanel"
                 aria-labelledby="v-pills-editors-tab">

                <h2>Editors</h2>
                <p>
                    The following users are members of, and are able to edit, this organization:
                </p>

                {% url 'organizations:editors-update' slug=object.slug as edit_url %}
                {% include "groups/partials/user_list.html" with edit_url=edit_url form=editors_form users=object.editors_group.user_set.all %}

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'organizations:editors-update' slug=object.slug %}">
                        <i class="fa fa-plus"></i> Add Editors
                    </a>
                </p>
            </div>

            <div class="tab-pane fade" id="v-pills-members" role="tabpanel"
                 aria-labelledby="v-pills-members-tab">

                <h2>Members</h2>
                <p>The following users are members of this organization:</p>

                {% url 'organizations:members-update' slug=object.slug as edit_url %}
                {% include "groups/partials/user_list.html" with edit_url=edit_url form=members_form users=object.members_group.user_set.all %}

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'organizations:members-update' slug=object.slug %}">
                        <i class="fa fa-plus"></i> Add Members
                    </a>
                </p>
            </div>
        {% endif %}

    </div>
{% endblock %}