{% extends "layout.html" %}
{% from "_macros.html" import render_logo, render_phone_prop, render_email_prop, render_events, render_location_prop, render_link_prop, render_image %}
{% block title %}
{{ admin_unit.name }}
{% endblock %}
{% block content %}

    <h1>{{ admin_unit.name }}</h1>

    {% if can_update_admin_unit %}
    <div class="my-4">
        <a class="btn btn-primary my-1" href="{{ url_for('admin_unit_update', admin_unit_id=admin_unit.id) }}" role="button"><i class="fa fa-edit"></i> {{ _('Update admin unit') }}</a>
    </div>
    {% endif %}

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#info" role="tab" area-selected="true">{{ _('Info') }}</a>
        </li>
        {% if current_user_member or can_list_admin_unit_members %}
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#members" role="tab" area-selected="true">{{ _('Members') }}</a>
        </li>
        {% endif %}
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#organizations" role="tab" area-selected="true">{{ _('Organizations') }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#events" role="tab">{{ _('Events') }}</a>
        </li>
    </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane pt-4 active" id="info" role="tabpanel">

        <div class="my-4">
            {{ render_location_prop(admin_unit.location) }}
            {{ render_link_prop(admin_unit.url) }}
            {{ render_email_prop(admin_unit.email) }}
            {{ render_phone_prop(admin_unit.phone) }}
        </div>

        {% if admin_unit.logo_id %}
        <div class="my-4">{{ render_logo(admin_unit.logo_id) }}</div>
        {% endif %}

    </div>

    {% if current_user_member or can_list_admin_unit_members %}
    <div class="tab-pane pt-4" id="members" role="tabpanel">
        {% if current_user_member %}
        <div class="my-4">
            {{ _('You are a member of this admin unit.') }}
            ({% for role in current_user_member.roles %}{{ role.name }}{%if not loop.last %}, {% endif %}{% endfor %})
        </div>
        {% endif %}

        {% if can_list_admin_unit_members %}
        <div class="table-responsive">
            <table class="table table-sm table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>{{ _('Name') }}</th>
                        <th>{{ _('Roles') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for member in admin_unit.members %}
                        <tr>
                            <td>{{ member.user.email }}</td>
                            <td>{% for role in member.roles %}{{ role.name }}{%if not loop.last %}, {% endif %}{% endfor %}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
    {% endif %}
    <div class="tab-pane pt-4" id="organizations" role="tabpanel">
        <div class="table-responsive">
            <table class="table table-sm table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>{{ _('Name') }}</th>
                        <th>{{ _('Roles') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for admin_unit_org in admin_unit.organizations %}
                        <tr>
                            <td><a href="{{ url_for('organization', organization_id=admin_unit_org.organization_id) }}">{{ admin_unit_org.organization.name }}</a></td>
                            <td>{% for role in admin_unit_org.roles %}{{ role.name }}{%if not loop.last %}, {% endif %}{% endfor %}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="tab-pane pt-4" id="events" role="tabpanel">
        {{ render_events(admin_unit.events) }}
    </div>
  </div>

{% endblock %}