{% extends 'smartmin/form.html' %}
{% load smartmin i18n %}
{% block form-span %}
    col-md-12
{% endblock form-span %}
{% block fields %}
    <table style="margin-bottom:0px;" class="table table-condensed">
        <thead>
            <tr>
                <th>{% trans "Accounts" %}</th>
                <th class="permission">{% trans "Admins" %}</th>
                <th class="permission">{% trans "Editors" %}</th>
                <th class="permission">{% trans "Remove" %}</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hide" id="admin-error">
                <td colspan="5" class="alert alert-error">{% trans "You must have at least one administator" %}</td>
            </tr>
            {% for user in org_users %}
                <tr>
                    <td>
                        {{ user.email }}
                        {% if user.first_name or user.last_name %}({{ user.first_name }} {{ user.last_name }}){% endif %}
                    </td>
                    {% with group_fields|get:user as row_fields %}
                        {% for check_name in row_fields %}<td class="check permission">{{ form|field:check_name }}</td>{% endfor %}
                    {% endwith %}
                    <td class="check permission">
                        <input type="checkbox">
                    </td>
                </tr>
            {% endfor %}
            <!-- pending invites -->
            {% for invite in invites %}
                <tr class="invite">
                    <td>{{ invite.email }} (Invite Sent)</td>
                    <td class="permission">
                        {% if invite.user_group == 'A' %}
                            <input type="checkbox">
                        {% else %}
                            <input type="checkbox">
                        {% endif %}
                    </td>
                    <td class="permission">
                        {% if invite.user_group == 'E' %}
                            <input type="checkbox">
                        {% else %}
                            <input type="checkbox">
                        {% endif %}
                    </td>
                    <td height="3px"></td>
                </tr>
            {% endfor %}
            <tr>
                <td colspan="1" class="form">{% render_field 'emails' %}</td>
                <td colspan="3" class="form">{% render_field 'user_group' %}</td>
            </tr>
        </tbody>
    </table>
{% endblock fields %}
{% block extra-style %}
    <style type="text/css">
    input[type="checkbox"] {
      width: 50px;
    }
    .form-horizontal .control-label {
      width: 100%;
      text-align: left;
    }
    
    input.form-control, textarea.form-control, select.form-control {
      width: 100%;
    }
    </style>
{% endblock extra-style %}
{% block extra-script %}
    {{ block.super }}
    <script type="text/javascript">
    $(function() {
      // initialize the table cell checkboxes
      var boxes = $("td.check");
      boxes.each(function() {
        var list_input = $(this).children("input[type='checkbox']");
        if (list_input[0].checked) {
          $(this).addClass("checked");
        } else {
          $(this).removeClass("checked");
        }
      });
    });
    
    $(function() {
      // update the cells checkbox on click
    
      $("td.check input[type='checkbox']").on('click', function(){
        var cell = $(this).parent("td.check");
        var ipt = $(this);
    
        if (!cell.hasClass("checked")) {
          allCells = cell.parent().children('td.check');
          allHiddenInputs = allCells.find("input[type='checkbox']");
    
          // Uncheck everything First
          allCells.removeClass('checked');
          allHiddenInputs.prop('checked', false);
    
          // Check the clicked cell
          cell.addClass('checked');
          ipt.prop('checked', true);
    
        }
    
        hasAdmin = false;
        // validate that we always have an admin first
        // to show error if no admin is remaining
        $("td.check").parent().find("input[id*='administrators']").each(function() {
           hasAdmin = hasAdmin || $(this).prop('checked')
        })
    
        if (!hasAdmin) {
          $('#admin-error').show();
        } else {
          $('#admin-error').hide();
        }
    
      });
    });
    </script>
{% endblock extra-script %}