<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Security</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            {{> securitymenu}}
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="overview">

                <p>&nbsp;</p>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Application specific passwords</h3></div>
                    <div class="panel-body">
                        <p>Here are listed passwords generated for specific applications. If the password is leaked then delete it and generate a new one.</p>
                        <p>
                            Application Specific Passwords must be used for external applications if two factor authentication is enabled.
                        </p>
                    </div>
                    <table class="table table-responsive">
                        <thead>
                            <tr>
                                <th>
                                    #
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Created
                                </th>
                                <th>
                                    Used
                                </th>
                                <th>
                                    &nbsp;
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#if asps}}

                                {{#each asps}}
                                    <tr>
                                        <th>
                                            {{index}}
                                        </th>
                                        <td>
                                            {{description}}
                                        </td>
                                        <td class="datestring" title="{{created}}">
                                            {{created}}
                                        </td>
                                        <td>
                                            {{#if lastUse.time}}
                                                <a href="/account/security/events?event={{lastUse.event}}"><span class="datestring" title="{{lastUse.time}}">{{lastUse.time}}</span></a>
                                            {{else}}
                                                never
                                            {{/if}}
                                        </td>
                                        <td>
                                            <div class="pull-right">
                                                <button type="button" data-asp="{{id}}" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                {{/each}}
                            {{else}}
                                <tr>
                                    <td colspan="4">
                                        No application specific passwords generated
                                    </td>
                                </tr>
                            {{/if}}
                        </tbody>
                    </table>
                </div>

                <form method="post" action="/account/security/asps/create">
                    <input type="hidden" name="_csrf" value="{{csrfToken}}">

                    <fieldset>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Create new application specific password</h3>
                            </div>
                            <div class="panel-body">

                                <div class="form-group{{#if errors.description}} has-error{{/if}}">
                                    <label for="description">Application description</label>
                                    <input type="text" class="form-control" name="description" id="description" placeholder="Password for Outlook ..." required>
                                    {{#if errors.description}}
                                        <span class="help-block">{{errors.description}}</span>
                                    {{/if}}
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Generate password</button>
                                </div>

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


<!-- Modal -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="deleteModalLabel">Delete password</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to permanently delete Application Specific Password?
      </div>
      <div class="modal-footer">
        <form method="post" action="/account/security/asps/delete">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" id="delete-form-asp" name="id" value="">
            <button type="button" class="btn btn-default" data-dismiss="modal">No, cancel</button>
            <button type="submit" class="btn btn-danger bulk-delete-confirm">Yes, delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var asp = button.data('asp'); // Extract info from data-* attributes
        document.getElementById('delete-form-asp').value = asp;
    });
}, false);
</script>
