{% extends base_template %}
{% load i18n %}
{% load staticfiles %}
{% load my_filters %}

{% block control_panel_active %}active{% endblock control_panel_active %}

{% block headjs %}{{ block.super }}
    <script>
        // makes correct link submit form for removing admin & revoking invites
        $(function() {
            $('.remove-admin-submit, .remove-invite-submit').click(function(ev) {
                $(ev.srcElement).parents('form').submit();
                return false;
            });

            $('.glossary-link').wrap('<a href="{% url glossary %}"></a>');
        });
    </script>

    <script src="{% static 'js/bootstrap/tooltip.js' %}"></script>
    <script src="{% static 'js/bootstrap/transition.js' %}"></script>
    <script src="{% static 'js/bootstrap/popover.js' %}"></script>
    <script>
    $(function() {
        var nbOrganization = {{ organizations|length }} - 1 ; //Start the counter at 0

        // Used <div> instead of <a> to avoid a dirty js hack to avoid the reload to top page.
        for (var i=0;i<=nbOrganization;i++){
            $('#button-popover-zone-'+(i.toString()) ).popover() //Each popover needs an individual callback
            $('#button-popover-orgadmin-'+(i.toString()) ).popover()
        }

        $('#button-popover-org').popover()
        $('#button-popover-headless').popover()

        $('body').on('click', function (e) {
            $('.button-popover').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });
    });
    </script>
{% endblock headjs %}

{% block headcss %}{{ block.super }}
    <style>
        .glossary-link {
            background: url('/static/images/question_mark.png') no-repeat center;
            display: inline-block;
            width: 14px;
            height: 10px;
            float: center;
            margin-bottom: -51px;
            margin-left: -5px;
            margin-right: -5px;
        }
    </style>
{% endblock headcss %}

{% block content %}
    <div class="row-fluid">
        <div class="span9">
            <div class="tooltip-container">
                <h1>{% trans "My Organization" %}{{ organizations|pluralize }}</h1>
                <div id="button-popover-org" class="button-popover" data-toggle="popover" data-placement="right" data-content="{% trans 'An Organization is a group of people responsible for administering a set of Sharing Networks.' %}" title="" data-original-title="Organization">?</div>
            </div>
        </div>
        <div class="span3">
            <form method="link" action="/organization/new/" class="neworg-button">
                <input type="submit" class="button--large" value="Create a new organization">
            </form>
        </div>
    </div>

    {% for invite in my_invitations %}
    <form method="post" action="{% url org_invite_action invite_id=invite.pk %}">
        {% csrf_token %}
        <div id="invite-text">
            <p>You have been invited by <a href="mailto:{{invite.invited_by.email}}">{% firstof invite.invited_by.get_full_name invite.invited_by.username %}</a> to help administer "<span style="font-weight:bold">{{ invite.organization }}</span>". Please click below to join the organization or to decline this invitation.</p>
            <div class="inputs">
                <input type="submit" name="join" value="Join">
                <input type="submit" name="decline" value="Decline">
            </div>
        </div>
    </form>
    {% endfor %}


    {% if not organizations %}
        <h2>You currently have no organizations. Would you like to <a href="/organization/new/">create a new organization</a>?</h2>
        <h2>To join an existing organization, contact one of its administrators to have them add you.</h2>

    {% else %}
        {% for pk,org in organizations.items %}
        <div class="row-fluid">
            <div class="span12 organization-title">
                <div class="tooltip-container">
                    <h2>{{ org.name }}</h2>
                    {% if org.name == HEADLESS_ORG_NAME %}
                        <div id="button-popover-headless" class="button-popover" data-toggle="popover" data-placement="right" data-content="Unclaimed Networks are (auto-registered) sharing networks not linked to any account." title="" data-original-title="Unclaimed Networks">?</div>
                    {% endif %}
                    <ul class="options">
                        {% if org.name != HEADLESS_ORG_NAME %}
                            <li>
                                <a href="{% url organization_form org_id=org.id %}">
                                    <span class="icon-pencil icon-large" title="Edit this organization's information."></span>
                                </a>
                            </li>
                        {% endif %}
                        {% if org.owner == request.user and not org.get_zones %}
                            <li>
                                <a href="{% url delete_organization org_id=org.id %}" onclick="return confirm('Are you sure you want to delete {{org.name}}?')">
                                    <span class="icon-trash icon-large" title="Delete this organization."></span>
                                </a>
                            </li>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row-fluid organization-container">
                <div class="span6">
                    <div class="tooltip-container">
                        <h3>Affiliated Sharing Networks</h3>
                        <div id="button-popover-zone-{{ forloop.counter0 }}" class="button-popover" data-toggle="popover" data-placement="right" data-content="A Sharing Network is a set of devices that may connect to share data with each other." title="" data-original-title="Sharing Network">?</div>
                    </div>
                    <table class="table">
                        {% for zone in zones|get_item:pk %}
                        <tr>
                            <td>{{ zone.name }}</td>
                            <td><a class="zone-manage-link" href="{% url zone_management org_id=org.id zone_id=zone.id %}">
                                 Manage
                            </a></td>
                            <td>
                                {% if zone.is_deletable %}
                                <a class="zone-delete-link" href="{% url delete_zone org_id=org.id zone_id=zone.id %}" onclick="return confirm('Are you sure you want to delete {{zone.name}}?')">
                                     Delete
                                </a>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </table>

                    <form method="link" action="{% url zone_form org_id=org.id zone_id='new' %}">
                        <input class="button--small" type="submit" value="Create a new sharing network">
                    </form>
                </div>

                <div class="span6">

                    <div class="tooltip-container">
                        <h3>Organization Admins</h3>
                        <div id="button-popover-orgadmin-{{ forloop.counter0 }}" class="button-popover" data-toggle="popover" data-placement="right" data-content="An Organization Admin is a user responsible for overseeing an organization." title="" data-original-title="Organization admin">?</div>
                    </div>

                    {% for member in org.get_members %}{# this is slow #}
                    <table class="table">
                        <tr>
                            <td title="{{member.email }}" >
                                {% firstof member.get_full_name member.username %}
                            </td>
                            <td>
                                {% if org.owner == member and member == request.user %}
                                (You are the owner)
                                {% elif member == request.user %}
                                (You)
                                {% elif org.owner == member %}
                                (Owner)
                                {% else %}
                                <form method="post" action="{% url delete_admin org_id=org.id user_id=member.id %}">
                                    {% csrf_token %}
                                    (<a href="" class="remove-admin-submit">Remove Admin</a>)
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}

                        {% for invite in org.invitations.all %}{# TODO(bcipolli) this is inefficient, convert to list (how?) #}


                        <tr id="invited-tag">
                            <td>
                                {{ invite.email_to_invite }} (invited)

                            </td>

                            <td>
                                <form method="post" action="{% url delete_invite org_id=org.id invite_id=invite.pk %}">
                                    {% csrf_token %}
                                    <a href="" class="remove-invite-submit">(Revoke Invite)</a>

                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                    </table>

                    <div class="add">
                        <form method="post" class="form-inline">
                            {% csrf_token %}
                            <input type="hidden" name="organization" value="{{ org.pk }}">
                            {{ org.form.invited_by }}

                            <h4>Add Admin</h4>
                            <input type="text" placeholder="example@email.com" name="email_to_invite">
                            <input type="submit" class="button--small" value="Send invite!">


                            {% for error in org.form.non_field_errors %}
                            <div class="errors">{{ error }}</div>
                            {% endfor %}
                        </form>
                    </div>
                </div><!-- .span6 -->
            </div> <!-- .row -->
            <br>
        {% endfor %}
    {% endif %}

    <p>
        {% blocktrans %}You're ready to <a href="{{ download_url }}">download and install KA Lite</a>{% endblocktrans %}
    </p>

{% endblock content %}