<div metal:use-macro="request.sdiapi.main_template" i18n:domain="substanced">

  <div metal:fill-slot="head-more">

    <link rel="stylesheet" 
          href="${request.static_url('deform:static/select2/select2.css')}"
          type="text/css"/>

    <script type="text/javascript">

     $(document).ready(function() {
       $('#principal').select2();
       $('#permissions').select2();
     });

     // update UI in real-time based if the browser supports SSE

     if (!!window.EventSource) {

       function redraw(tgt_sel, url) {
         donehandler = function (html) {
           $(tgt_sel).replaceWith(html);
         };
         $.ajax({
           url:url,
           type:'GET',
         }).done(donehandler);
       } 

       var source = new EventSource("${request.sdiapi.mgmt_path(context, 'auditstream-sse', _query={'oid':oids})}");
       source.addEventListener("ACLModified" , function(e) {
         redraw("#local_acl", "${request.sdiapi.mgmt_path(context, '@@local_acl')}");
         redraw("#inherited_acl", "${request.sdiapi.mgmt_path(context, '@@inherited_acl')}");
       });

     }


    </script>

    <script type="text/javascript"
            src="${request.static_url('deform:static/select2/select2.js')}"></script>
  </div>


  <div metal:fill-slot="main">

    <div class="panel panel-default">
      <div class="panel-heading" i18n:translate="">Local ACL</div>
      <div class="panel-body">

        <metal:local_acl define-macro="local_acl">
          <div id="local_acl">
            <table tal:condition="local_acl" class="table table-striped">

              <thead>
                <tr>
                  <th width="15%" i18n:translate="">Allow / Deny</th>
                  <th width="25%" i18n:translate="">Principal</th>
                  <th width="40%" i18n:translate="">Permissions</th>
                  <th width="15%" i18n:translate="">Control</th>
                </tr>
              </thead>

              <tbody>

                <tr tal:repeat="ace local_acl">
                  <td tal:content="ace[0]">Allow</td>
                  <td tal:content="ace[1]">PRINCIPAL</td>
                  <td tal:content="', '.join(ace[2])">PERM1, PERM2</td>
                  <td>
                    <form action="@@acl_edit" method="post" onsubmit="return sdi.loading_indicator_on()">
                      <input type="hidden" name="index" value="${repeat['ace'].index}" />

                      <button
                       tal:define="disabled repeat['ace'].start"
                       tal:attributes="disabled disabled or None;
                       style disabled and 'opacity:0.4' or None"
                       name="form.move_up"
                       type="submit" class="btn btn-xs btn-primary">
                        <i class="glyphicon glyphicon-arrow-up"> </i>
                      </button>

                      <button
                       tal:define="disabled repeat['ace'].end"
                       tal:attributes="disabled disabled or None;
                       style disabled and 'opacity:0.4' or None"
                       name="form.move_down"
                       type="submit" class="btn btn-xs btn-primary">
                        <i class="glyphicon glyphicon-arrow-down"> </i>
                      </button>

                      <button name="form.remove"
                              type="submit"
                              class="btn btn-xs btn-danger">
                        <i class="glyphicon glyphicon-remove"> </i>
                      </button>

                      <input type="hidden" name="csrf_token" 
                             value="${request.session.get_csrf_token()}"/>

                    </form>
                  </td>
                </tr>

              </tbody>

            </table>
          </div>

        </metal:local_acl>



        <div class="panel panel-default">
          <div class="panel-body">

            <form action="@@acl_edit" method="post" 
                  onsubmit="return sdi.loading_indicator_on()">

              <div class="col-md-2">
                <div class="radio">
                  <label i18n:translate="">
                    <input type="radio" 
                           id="allow_add"
                           name="verb" 
                           value="Allow" 
                           i18n:name="button"
                           checked="true"/> Allow
                  </label>
                </div>
                <div class="radio">
                  <label i18n:translate="">
                    <input type="radio" 
                           id="deny_add"
                           name="verb"
                           i18n:name="button"
                           value="Deny" /> Deny
                  </label>
                </div>
              </div>

              <div class="col-md-3">
                <select data-placeholder="Choose a Principal"
                        i18n:attributes="data-placeholder"
                        name="principal"
                        id="principal"
                        style="width: 100%">
                  <optgroup label="Groups">
                    <option tal:repeat="(group_id, group_name) groups"
                            value="${group_id}">${group_name}</option>
                  </optgroup>
                  <optgroup label="Users">
                    <option tal:repeat="(user_id, user_name) users"
                            value="${user_id}">${user_name}</option>
                  </optgroup>
                </select>
              </div>

              <div class="col-md-5">
                <select name="permissions" 
                        data-placeholder="Choose Permissions"
                        i18n:attributes="data-placeholder"
                        id="permissions"
                        multiple="multiple"
                        style="width: 100%; border-radius: 4px; border: 1px solid #cccccc;">
                  <option tal:repeat="permission permissions"
                          value="${permission}">${permission}</option>
                </select>
              </div>

              <div class="col-md-2 pull-right">
                <input type="submit" 
                       name="form.add"
                       class="btn btn-primary"
                       i18n:attributes="value"
                       value="Add" />
                <input type="hidden"
                       name="csrf_token" 
                       value="${request.session.get_csrf_token()}"/>
              </div>

            </form>
          </div>
        </div>

      </div>
    </div>
    
    <metal:inherited_acl define-macro="inherited_acl">
      
      <div id="inherited_acl">

        <tal:block condition="context is not request.root">

          <div class="panel panel-default">
            <div class="panel-heading" i18n:translate="">Inherit Parent ACL</div>
            <div class="panel-body">
              
              <div class="row">
                <form action="@@acl_edit" method="post">
                  
                  <div class="col-md-2">
                    <div class="radio">
                      <label i18n:translate="">
                        <input type="radio" 
                               id="inherit_enabled" 
                               name="inherit"
                               i18n:name="button"
                               value="enabled"
                               tal:attributes="checked inheriting == 'enabled'"/> 
                      Enabled
                      </label>
                    </div>
                    <div class="radio">
                      <label i18n:translate="">
                        <input type="radio" 
                               id="inherit_disabled"
                               i18n:name="button"
                               name="inherit"
                               value="disabled"
                               tal:attributes="checked inheriting == 'disabled'"/> 
                      Disabled
                      </label>
                    </div>
                  </div>
                  
                  <div class="col-md-2">
                    <input type="submit" name="form.inherit" value="Update" 
                           i18n:attributes="value"
                           class="btn btn-primary"/>
                    <input type="hidden" name="csrf_token" 
                           value="${request.session.get_csrf_token()}"/>
                  </div>
                  
                </form>
                
              </div>
              
            </div>
          </div>

        </tal:block>

        <tal:inherited condition="parent_acl">

          <div class="panel panel-default">
            <div class="panel-heading" i18n:translate="">Parent ACL</div>
            <div class="panel-body">
              <table class="table table-striped">
                
                <thead>
                  <tr>
                    <th width="15%" i18n:translate="">Allow / Deny</th>
                    <th width="25%" i18n:translate="">Principal</th>
                    <th width="40%" i18n:translate="">Permissions</th>
                  </tr>
                </thead>
                
                <tbody>
                  
                  <tr tal:repeat="ace parent_acl">
                    <td tal:content="ace[0]">Allow</td>
                    <td tal:content="ace[1]">PRINCIPAL</td>
                    <td tal:content="', '.join(ace[2])">PERM1, PERM2</td>
                  </tr>
                  
                </tbody>

              </table>
            </div>
          </div>

        </tal:inherited>

      </div>

    </metal:inherited_acl>

  </div>

</div>
