<!-- Modal add user -->
<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add User</h4>
            </div>
            <div class="modal-body">
                <form name="useradd_form" role="form" ng-submit="useradd.submit()" autocomplete="off">
                    <input type="password" style="display: none;">
                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email) }">
                        <label class="control-label">Email</label>
                        <div class="control-label" ng-show="(!useradd_form.email.$dirty && useradd.error.email) || (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email)">
                            <small ng-show="useradd_form.email.$error.required">An email is required</small>
                            <small ng-show="useradd_form.email.$error.email">This is not a valid email</small>
                            <small ng-show="!useradd_form.email.$dirty && useradd.error.email">{{ useradd.error.email }}</small>
                        </div>
                        <input type="email" class="form-control" ng-model="useradd.email" name="email" id="inputUserAddEmail" required autofocus>
                    </div>

                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username) }">
                        <label class="control-label">Username</label>
                        <div class="control-label" ng-show="(!useradd_form.username.$dirty && useradd.error.username) || (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username)">
                            <small ng-show="useradd_form.username.$error.username">This is not a valid username</small>
                            <small ng-show="!useradd_form.username.$dirty && useradd.error.username">{{ useradd.error.username }}</small>
                        </div>
                        <input type="text" class="form-control" ng-model="useradd.username" name="username" id="inputUserAddUsername" placeholder="Optional">
                    </div>

                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.displayName.$dirty && useradd_form.displayName.$invalid) || (!useradd_form.displayName.$dirty && useradd.error.displayName) }">
                        <label class="control-label">Display Name</label>
                        <div class="control-label" ng-show="(!useradd_form.displayName.$dirty && useradd.error.displayName) || (useradd_form.displayName.$dirty && useradd_form.displayName.$invalid) || (!useradd_form.displayName.$dirty && useradd.error.displayName)">
                            <small ng-show="useradd_form.displayName.$error.displayName">This is not a valid displayName</small>
                            <small ng-show="!useradd_form.displayName.$dirty && useradd.error.displayName">{{ useradd.error.displayName }}</small>
                        </div>
                        <input type="text" class="form-control" ng-model="useradd.displayName" name="displayName" id="inputUserAddDisplayName" placeholder="Optional">
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="useradd.sendInvite" id="inputUserAddSendInvite"> Send an invitation email now
                        </label>
                    </div>
                    <input class="ng-hide" type="submit" ng-disabled="useradd_form.$invalid || useradd.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="useradd.submit()" ng-disabled="useradd_form.$invalid || useradd.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="useradd.busy"></i> Add User</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal remove user -->
<div class="modal fade" id="userRemoveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Delete user {{ userremove.userInfo.username || userremove.userInfo.email }}</h4>
            </div>
            <div class="modal-body">
                <form name="userremove_form" role="form" ng-submit="userremove.submit()" autocomplete="off">
                    <input type="password" style="display: none;">
                    <div class="form-group" ng-class="{ 'has-error': (userremove_form.password.$dirty && userremove_form.password.$invalid) || (!userremove_form.password.$dirty && userremove.error.password)}">
                        <label class="control-label">Give your password to verify this action</label>
                        <input type="password" class="form-control" ng-model="userremove.password" id="inputUserRemovePassword" name="password" placeholder="Your Password" required autofocus>
                        <div class="control-label" ng-show="(!userremove_form.password.$dirty && userremove.error.password) || (userremove_form.password.$dirty && userremove_form.password.$invalid)">
                            <small ng-show="userremove_form.password.$error.required && !userremove.error.password">A password is required</small>
                            <small ng-show="!useradd_form.email.$dirty && userremove.error.password">{{ userremove.error.password }}</small>
                        </div>
                    </div>
                    <input class="hide" type="submit" ng-disabled="userremove_form.$invalid || userremove.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" ng-click="userremove.submit()" ng-disabled="userremove_form.$invalid || userremove.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="userremove.busy"></i> Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal edit user -->
<div class="modal fade" id="userEditModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit user {{ useredit.userInfo.username }}</h4>
            </div>
            <div class="modal-body">
                <form name="useredit_form" role="form" ng-submit="useredit.submit()" autocomplete="off">
                    <input type="password" style="display: none;">
                    <div class="form-group" ng-show="mailConfig.enabled">
                        <label class="control-label">Email</label>
                        <input type="email" class="form-control" placeholder="Will be assigned when user signs up" ng-model="useredit.userInfo.email" disabled>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': (useredit_form.email.$dirty && useredit_form.email.$invalid) || (!useredit_form.email.$dirty && useredit.error.email) }">
                        <label class="control-label" ng-show="mailConfig.enabled">Password recovery email</label>
                        <label class="control-label" ng-hide="mailConfig.enabled">Email</label>
                        <div class="control-label" ng-show="(!useredit_form.email.$dirty && useredit.error.email) || (useredit_form.email.$dirty && useredit_form.email.$invalid) || (!useredit_form.email.$dirty && useredit.error.email)">
                            <small ng-show="useredit_form.email.$error.required">An email is required</small>
                            <small ng-show="useredit_form.email.$error.email">This is not a valid email</small>
                            <small ng-show="!useredit_form.email.$dirty && useredit.error.email">{{ useredit.error.email }}</small>
                        </div>
                        <input type="email" class="form-control" ng-model="useredit.email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Groups</label>
                        <div>
                            <span ng-repeat="group in groups | ignoreAdminGroup" ng-show="group.id !== 'admin'">
                                <button class="btn btn-default" type="button" ng-click="useredit.toggleGroup(group);" ng-class="{ 'btn-primary': (useredit.groupIds.indexOf(group.id) !== -1) }">{{ group.name }}</button>
                            </span>
                        </div>
                        <div ng-show="groups.length <= 1">No groups available.</div>
                    </div>
                    <div class="form-group" ng-show="useredit.userInfo.username && mailConfig.enabled" ng-class="{ 'has-error': useredit.error.aliases }">
                        <label class="control-label">Email aliases</label>

                        <div class="control-label" ng-show="useredit.error.aliases">
                            <small>{{ useredit.error.aliases }}</small>
                        </div>

                        <div class="input-group form-inline">
                            <tag-input class="form-group form-control" placeholder='Separate aliases by comma' taglist='useredit.aliases' name="aliases"></tag-input>
                            <div class="input-group-addon">
                                    @{{ config.fqdn }}
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="form-group" ng-hide="isMe(useredit.userInfo)">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="useredit.superuser"> Make this user a Cloudron admin
                            </label>
                        </div>
                    </div>
                    <input class="hide" type="submit" ng-disabled="useredit_form.$invalid || useredit.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" ng-click="useredit.submit()" ng-disabled="useredit_form.$invalid || useredit.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="useredit.busy"></i> Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal add group -->
<div class="modal fade" id="groupAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Group</h4>
            </div>
            <div class="modal-body">
                <form name="groupAddForm" role="form" novalidate ng-submit="groupAdd.submit()" autocomplete="off">
                    <div class="form-group" ng-class="{ 'has-error': (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupAdd.error.name) }">
                        <label class="control-label" for="groupAddName">Name</label>
                        <div class="control-label" ng-show="(!groupAddForm.name.$dirty && groupAdd.error.name) || (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupAdd.error.name)">
                            <small ng-show="groupAddForm.name.$error.required">A name is required</small>
                            <small ng-show="groupAddForm.name.$error.minlength">The name is too short</small>
                            <small ng-show="groupAddForm.name.$error.maxlength">The name is too long</small>
                            <small ng-show="!groupAddForm.name.$dirty && groupAdd.error.name">{{ groupAdd.error.name }}</small>
                        </div>
                        <input type="text" class="form-control" ng-model="groupAdd.name" id="groupAddName" name="name" ng-maxlength="200" ng-minlength="1" required autofocus>
                    </div>
                    <input class="hide" type="submit" ng-disabled="groupAddForm.$invalid || groupAdd.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="groupAdd.submit()" ng-disabled="groupAddForm.$invalid || groupAdd.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="groupAdd.busy"></i> Add Group</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal remove group -->
<div class="modal fade" id="groupRemoveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Delete group {{ groupRemove.group.name }}</h4>
            </div>
            <div class="modal-body">
                <div ng-show="groupRemove.memberCount" class="text-danger">
                    <b>This group still has {{ groupRemove.memberCount }} member(s). Are you sure this group is not used?</b>
                    <br/>
                    <br/>
                </div>

                <form name="groupRemoveForm" role="form" novalidate ng-submit="groupRemove.submit()" autocomplete="off">
                    <input type="password" style="display: none;">
                    <div class="form-group" ng-class="{ 'has-error': (groupRemoveForm.password.$dirty && groupRemoveForm.password.$invalid) || (!groupRemoveForm.password.$dirty && groupRemove.error.password)}">
                        <label class="control-label" for="groupRemovePasswordInput">Give your password to verify this action</label>
                        <div class="control-label" ng-show="(!groupRemoveForm.password.$dirty && groupRemove.error.password) || (groupRemoveForm.password.$dirty && groupRemoveForm.password.$invalid)">
                            <small ng-show="groupRemoveForm.password.$error.required && !groupRemove.error.password">A password is required</small>
                            <small ng-show="!groupRemoveForm.password.$dirty && groupRemove.error.password">{{ groupRemove.error.password }}</small>
                        </div>
                        <input type="password" class="form-control" ng-model="groupRemove.password" id="groupRemovePasswordInput" name="password" placeholder="Password" required autofocus>
                    </div>
                    <input class="hide" type="submit" ng-disabled="groupRemoveForm.$invalid || groupRemove.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" ng-click="groupRemove.submit()" ng-disabled="groupRemoveForm.$invalid || groupRemove.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="groupRemove.busy"></i> Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal invite sent -->
<div class="modal fade" id="inviteSentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Invite Sent</h4>
            </div>
            <div class="modal-body">
                <p>An email has been sent to <b>{{ inviteSent.email }}</b>.</p>
                <p>You can also share this invite link directly:</p>
                <div class="input-group">
                    <input type="text" id="setupLinkInput" class="form-control" ng-value="inviteSent.setupLink" readonly/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="setupLinkButton" type="button" data-clipboard-target="#setupLinkInput"><i class="fa fa-clipboard"></i></button>
                    </span>
                  </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="content content-large">

  <div class="text-left">
    <h1>Users <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()"><i class="fa fa-user-plus"></i> New User</button></h1>
  </div>

  <div class="card card-large">
      <div class="grid-item-top">
          <div class="row ng-hide" ng-show="!ready">
              <div class="col-lg-12 text-center">
                  <h2><i class="fa fa-circle-o-notch fa-spin"></i></h2>
              </div>
          </div>
          <div class="row animateMeOpacity ng-hide" ng-show="ready">
              <div class="col-lg-12">
                  <span ng-show="mailConfig.enabled">
                      Each user has a mailbox at <b><i>username</i>@{{ config.fqdn }}</b>.
                      Please refer to the <a ng-href="{{ config.webServerOrigin + '/documentation/email/#imap-settings-for-cloudron-email' }}" target="_blank">user documentation</a> on how to use Cloudron email accounts.
                      <br/>
                      <br/>
                  </span>
                  <table class="table table-hover">
                      <thead>
                          <tr>
                              <th style="width: 1px;"></th>
                              <th style="">User</th>
                              <th style="" class="text-left hidden-xs hidden-sm">Groups</th>
                              <th style="width: 100px" class="text-right">Actions</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr ng-repeat="user in users">
                              <td>
                                  <i class="fa fa-briefcase arrow" ng-show="user.admin" uib-tooltip="This user is an admin and can manage apps, groups and other users"></i>
                              </td>
                              <td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-show="user.username">
                                  {{ user.username }} &nbsp; <span class="text-muted" ng-hide="mailConfig.enabled">{{ user.email }}</span>
                              </td>
                              <td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-hide="user.username">
                                  <span class="text-muted" uib-tooltip="User is not activated yet">{{ user.alternateEmail || user.email }}</span>
                              </td>
                              <td class="text-left hand elide-table-cell hidden-xs hidden-sm" ng-click="useredit.show(user)">
                                  <span class="group-badge" ng-repeat="groupId in user.groupIds | ignoreAdminGroup">
                                      {{ groupsById[groupId].name }}
                                  </span>
                              </td>

                              </td>
                              <td class="text-right no-wrap" style="vertical-align: bottom">
                                  <button ng-show="!isMe(user)" class="btn btn-xs btn-default" ng-click="sendInvite(user)" title="Send invitation email"><i class="fa fa-paper-plane-o"></i></button>
                                  <button class="btn btn-xs btn-default" ng-click="useredit.show(user)" title="Edit User Profile"><i class="fa fa-pencil"></i></button>
                                  <button ng-show="!isMe(user)" class="btn btn-xs btn-danger" ng-click="userremove.show(user)" title="Remove User"><i class="fa fa-trash-o"></i></button>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>

  <br/>

  <div class="text-left">
    <h1>Groups <button class="btn btn-primary btn-outline pull-right" ng-click="groupAdd.show()"><i class="fa fa-plus"></i> New Group</button></h1>
  </div>

  <div class="card card-large">
      <div class="grid-item-top">
          <div class="row ng-hide" ng-show="!ready">
              <div class="col-lg-12 text-center">
                  <h2><i class="fa fa-circle-o-notch fa-spin"></i></h2>
              </div>
          </div>
          <div class="row animateMeOpacity ng-hide" ng-show="ready">
              <div class="col-lg-12">
                  Groups can be used to control access to an app.
                  <span ng-show="mailConfig.enabled">Each group serves as an email list at <b><i>groupname</i>@{{ config.fqdn }}</b>. Any email sent to this address will be forwarded to each group member.</span>
                  <br/>
                  <br/>
                  <table class="table table-hover">
                      <thead>
                          <tr>
                              <th style="">Name</th>
                              <th style="width: 300px" class="text-right">Actions</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr ng-repeat="group in groups | ignoreAdminGroup">
                              <td class="text-overflow: ellipsis; white-space: nowrap;">
                                  {{ group.name }}
                              </td>
                              <td class="text-right" style="vertical-align: bottom">
                                  <button class="btn btn-xs btn-danger" ng-click="groupRemove.show(group)" title="Remove Group"><i class="fa fa-trash-o"></i></button>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>
</div>
