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

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

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            {{> accountmenu}}
        </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">Manage identities</h3></div>
                    <div class="panel-body">
                        <p>Here you can add and modify alias addresses for your account. Aliases act just like your main address. You can not send out emails from identities that you do not own.</p>
                    </div>
                    <table class="table table-responsive">
                        <thead>
                            <th>
                                &nbsp;
                            </th>
                            <th>
                                Identity name
                            </th>
                            <th>
                                Alias Address
                            </th>
                            <th>
                                Created
                            </th>
                            <th>
                                &nbsp;
                            </th>
                        </thead>
                        <tbody>
                            {{#each identities}}
                                <tr class="{{#if main}}identity-main{{/if}}">
                                    <th>
                                        {{index}}
                                    </th>

                                    <td>
                                        {{#if name}}
                                            {{name}}
                                        {{else}}
                                            <em>–</em>
                                        {{/if}}
                                    </td>

                                    <td>
                                        {{#if main}}
                                            {{address}} <span>(default)</span>
                                        {{else}}
                                            {{address}}
                                        {{/if}}
                                    </td>

                                    <td class="datestring" title="{{created}}">
                                        {{created}}
                                    </td>

                                    <td class="text-right">
                                        {{#if ../canEdit}}
                                            <a href="/account/identities/edit?id={{id}}" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>
                                        {{/if}}
                                        <button class="btn btn-danger btn-xs" data-address="{{address}}" {{#if main}}disabled{{else}}data-identity="{{id}}" data-toggle="modal" data-target="#deleteModal"{{/if}}><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
                                    </td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>

                    <div class="panel-body">
                        <div class="form-group">
                            {{#if canCreate}}
                                <a href="/account/identities/create" class="btn btn-success"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Add new address</a>
                            {{else}}
                                <p class="text-muted">
                                    Maximum amount of identities created
                                </p>
                            {{/if}}
                        </div>
                    </div>
                </div>
            </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 address</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to permanently delete <strong id="delete-form-identity-val">this address</strong>?
      </div>
      <div class="modal-footer">
        <form method="post" action="/account/identities/delete">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" id="delete-form-identity" 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 identity = button.data('identity'); // Extract info from data-* attributes
        document.getElementById('delete-form-identity').value = identity;
        document.getElementById('delete-form-identity-val').textContent = button.data('address');
    });
}, false);
</script>
