{{template "header.tpl" .}}

{{template "main-navbar.tpl" .}}

<div class="main" style="margin-left: 0; padding-top: 3rem; padding-bottom: 5rem">

  <div class="container">

    <div class="row">
      <div class="col-8">
        <h3>Manage Team Sharing</h3>
      </div>
    </div>

    <div class="row" style="padding-top: 2rem">
      <div class="col">
        <h4>Servers, and the users they are shared with</h4>
        <table class="table table-bordered mb-0 w-auto">
          <thead>
            <tr>
              <th>Server</th>
              <th>User</th>
              <th width="5rem">Action</th>
            </tr>
          </thead>
          <tbody style="font-size: 0.9rem">
            {{if gt (len .ServersToUsers) .UnsharedServersCount}}
            {{range .ServersToUsers}}
              {{if eq (len .Users) 0}}
              <!--
              <tr>
                <td>{{.Server}}</td>
                <td></td>
                <td></td>
              </tr>
            -->
              {{else if eq (len .Users) 1}}{{$user := index .Users 0}}
              <tr>
                <td><a href="{{$.ExtURLPath}}server/{{.Server}}">{{.Server}}</a></td>
                <td>{{$user}}</td>
                <td style="text-align: center"><a
                  title="Revoke access for {{.Server}} from {{$user}}"
                  href="#" class="revoke-link"
                  data-server="{{.Server}}"
                  data-user="{{$user}}"><i class="far fa-trash-alt"></i></a></td>
              </tr>
              {{else}}
              {{$nusers := len .Users}}{{$server := .Server}}
              {{range $uidx, $user := .Users}}
              <tr>
                {{if eq 0 $uidx}}
                <td rowspan="{{$nusers}}"><a href="{{$.ExtURLPath}}server/{{$server}}">{{$server}}</a></td>
                {{end}}
                <td>{{$user}}</td>
                <td style="text-align: center"><a
                  title="Revoke access for {{$server}} from {{$user}}"
                  href="#" class="revoke-link"
                  data-server="{{$server}}"
                  data-user="{{$user}}"><i class="far fa-trash-alt"></i></a></td>
              </tr>
              {{end}}
              {{end}}
            {{end}}
            {{else}}
            <tr><td colspan="3">(There are no shared servers.)</td></tr>
            {{end}}
          </tbody>
        </table>
      </div>

      <div class="col">
        <h4>Users, and the servers they have access to</h4>
        <table class="table table-bordered mb-0 w-auto">
          <thead>
            <tr>
              <th>User</th>
              <th>Server</th>
              <th width="5rem">Action</th>
            </tr>
          </thead>
          <tbody style="font-size: 0.9rem">
            {{if .UsersToServers}}
            {{range .UsersToServers}}
              {{if eq (len .Servers) 1}}{{$server := index .Servers 0}}
                <tr>
                  <td>{{.User}}</td>
                  <td>{{$server}}</td>
                  <td style="text-align: center">
                    <a
                    title="Revoke access for {{$server}} from {{.User}}" 
                    href="#" class="revoke-link"
                    data-server="{{$server}}"
                    data-user="{{.User}}"><i class="far fa-trash-alt"></i></a>
                  </td>
                </tr>
              {{else if gt (len .Servers) 1}}
              {{$nservers := len .Servers}}{{$user := .User}}
              {{range $sidx, $server := .Servers}}
              <tr>
                {{if eq 0 $sidx}}
                <td rowspan="{{$nservers}}">{{$user}}</td>
                {{end}}
                <td>{{$server}}</td>
                <td style="text-align: center">
                  <a
                  title="Revoke access for {{$server}} from {{$user}}"
                  href="#" class="revoke-link"
                  data-server="{{$server}}"
                  data-user="{{$user}}"><i class="far fa-trash-alt"></i></a></td>
              </tr>
              {{end}}
              {{end}}
            {{end}}
            {{else}}
            <tr><td colspan="3">(There are no shared servers.)</td></tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>

    <div class="row mt-5">
      <div class="col">
        <h4>Servers not shared with anyone</h4>
        {{if .UnsharedServersCount}}
          <div class="d-flex flex-wrap justify-content-start">
          {{range .ServersToUsers}}
            {{if eq 0 (len .Users)}}
            <div class="mkellipsis pr-2" style="width: 8rem">
              <a href="{{$.ExtURLPath}}server/{{.Server}}">{{.Server}}</a>
            </div>
            {{end}}
          {{end}}
          </div>
        {{else}}
        (There are no unshared servers.)
        {{end}}
      </div>
    </div>

    <div class="row mt-5">
      <div class="col">
        <h4>Bulk add and remove</h4>
        <form id="id-form">
          <div class="form-group mr-2 mt-2">
            <select id="id-selaction" autocomplete="off" class="form-control form-control-sm" style="width: auto; display: inline-block;">
              <option value="1" selected>Grant</option>
              <option value="2">Revoke</option>
            </select>
          access to these users:
          </div>
          <div class="form-group mb-2" style="display: block">
            <textarea id="id-emails" class="form-control" rows="8" cols="60" style="width: auto"
              autocomplete="off" required
              placeholder="Email addresses, one per line"></textarea>
          </div>
          <div id="id-bademail"style="display: none" class="text-danger mb-1">One or more emails are invalid.</div>
          <div id="id-noemail"style="display: none" class="text-danger mb-1">At least one email is required.</div>
          <div class="mb-2">
            for these servers:
          </div>
          {{if .AllServers}}
          <fieldset class="d-flex flex-wrap justify-content-start" style="border-radius: 0.25rem" id="id-allservers">
            {{range .AllServers}}
            <div class="form-check mkellipsis" style="width: 15rem">
              <label><input class="form-check-input servercb" value="{{.}}"
                type="checkbox" autocomplete="off">{{.}}</label>
            </div>
            {{end}}
          </fieldset>
          {{else}}
          <div class="mb-2">(No servers have been setup yet.)</div>
          {{end}}
          <div id="id-noserver"style="display: none" class="text-danger mb-1">Please select at least one server.</div>
          <div>
            Quick Select: &nbsp; <a id="idb-selall" href="#">Select All</a> &nbsp; <a id="idb-selnone" href="#">Select None</a> &nbsp; <a id="idb-seltoggle" href="#">Toggle Selection</a>
          </div>
          <button class="btn btn-secondary mt-2" type="submit">Go</button>
        </form>
      </div>
    </div>

  </div>
</div>

<div class="modal fade" id="idd-revoke" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Revoke Access?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding: 2rem 1rem">
        Revoke access for <b id="iddt-server"></b> from <b id="iddt-user"></b>?
      </div>
      <div class="modal-footer">
        <button id="idb-revoke" type="button" class="btn btn-warning">Revoke</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="idd-bulk" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Bulk Operation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p><span style="color: sienna" id="iddt-action"></span> access to these users:
        <p><span style="color: sienna" id="iddt-users"></span>
        <p>for these servers:
        <p><span style="color: sienna" id="iddt-servers"></span> ?
      </div>
      <div class="modal-footer">
        <button id="idb-bulk" type="button" class="btn btn-warning">Confirm</button>
      </div>
    </div>
  </div>
</div>

{{template "footer-pre.tpl" .}}
<script type="text/javascript">
</script>
<script src="{{asset "users.min.js"}}" type="text/javascript"></script>
{{template "footer-post.tpl" .}}