{% extends "base.html" %}
{% load authorization_tags %}

{% block title %}Organizations - {{ block.super }}{% endblock %}
{% block navbar_title%}Organizations{% endblock %}

{% block content %}

<section class="content">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            {% include "messages.html" %}

            <div class="callout callout-info">
                {% if not memberships %}
                <p>You need an organization to manage your projects and their subscriptions. Click <a href="{% url 'create_organization' %}">here</a> to create your organization.</p>
                {% else %}
                <p>The organizations allows you to manage your projects and subscriptions. <a href="{% url 'create_organization' %}">Create a new organization?</a></p>
                {% endif %}
            </div>

            <div class="box box-primary">
                <div class="box-body">
                    <ul class="organizations-list products-list product-list-in-box">
                        {% if memberships %}
                        {% for membership in memberships %}
                        <li class="item">
                            <div class="product-info">
                                <div class="product-title">
                                    {% membership_can_access_org_settings membership as can_access_settings %}
                                    {% if membership.is_invited or not can_access_settings %}
                                    {{ membership.organization.name }}
                                    {% else %}
                                    <a href="{% url 'edit_organization' org_name=membership.organization.name %}">{{ membership.organization.name }}</a>
                                    {% endif %}
                                    <div class="pull-right">
                                        <div class="btn-group" role="group">
                                            {% if membership.is_invited %}
                                            <a href="{% url 'accept_organization_invitation' org_name=membership.organization.name key=membership.key %}" class="btn btn-primary btn-xs" type="button">Accept Invitation</a>
                                            {% endif %}
                                            {% if can_access_settings and not membership.is_invited %}
                                            <a href="{% url 'edit_organization' org_name=membership.organization.name %}" class="btn btn-default btn-xs">Edit</a>
                                            {% endif %}
                                            {% if membership.is_owner and not membership.is_invited %}
                                            <a href="{% url 'delete_organization' org_name=membership.organization.name %}" class="btn btn-danger btn-xs" type="button">Delete</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <span class="product-description">
                                    Role: {{ membership.role }}
                                </span>
                                {% if can_access_settings and not membership.is_invited %}
                                {% with members=membership.organization.membership_set.all %}
                                <div class="product-vendors">
                                    <div class="pointer change-collapsed collapsed" data-toggle="collapse" href="#org-{{ membership.organization.id }}" aria-expanded="false">
                                        <span class="product-vendors-title">Members (<strong>{{ members|length }}</strong>)
                                            <span class="box-meta">
                                                <i class="fa fa-plus"></i>
                                                <i class="fa fa-minus"></i>
                                            </span>
                                        </span>
                                    </div>
                                    <div id="org-{{ membership.organization.id }}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                                        <div class="box-body">
                                            <table class="table table-hover">
                                                <tbody>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Email</th>
                                                        <th>Role</th>
                                                    </tr>
                                                    {% for member in members %}
                                                    <tr>
                                                        <td>{% if member.user %}{{ member.user.username }}{% else %}-{% endif %}</td>
                                                        <td>{% if member.user %}{{ member.user.email }}{% else %}{{ member.email }}{% endif %}</td>
                                                        {% if member.user %}
                                                            {% if member.date_joined %}
                                                            <td><span class="label label-primary">{{ member.role }}</span></td>
                                                            {% else %}
                                                            <td><span class="label label-default">invited</span></td>
                                                            {% endif %}
                                                        {% else %}
                                                            <td><span class="label label-warning">pending signup</span></td>
                                                        {% endif %}
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                {% endwith %}
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                        {% else %}
                        <li class="item">
                            <div class="product-info">
                                <i>No organization yet.</i>
                            </div>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}