
<h2 class="sub-header"><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> {{mailbox.name}}</h2>

<form method="post" action="/webmail/{{mailbox.id}}/settings">
    <input type="hidden" name="_csrf" value="{{csrfToken}}">

    {{> mailbox}}

    {{#unless isInbox}}
        <div class="form-group">
            {{#unless isSpecial}}
                <div class="pull-right">
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
                </div>
            {{/unless}}
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Update</button>
        </div>
    {{/unless}}

</form>

<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 folder</h4>
      </div>
      <div class="modal-body">
            Are you sure you want to permanently delete <strong>{{mailbox.name}}</strong> and all its contents?
      </div>
      <div class="modal-footer">
        <form method="post" action="/webmail/{{mailbox.id}}/delete">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">

            <button type="button" class="btn btn-default" data-dismiss="modal">No, cancel</button>
            <button type="submit" class="btn btn-danger">Yes, delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var stream = new EventSource('/api/events');
    stream.onmessage = function(e) {
        var data, row, star, redrawTimer;
        try {
            data = JSON.parse(e.data);
        } catch (E) {
            return;
        }
        switch (data.command) {
            case 'COUNTERS': {
                if (data.mailbox) {
                    if(FAVICON && data.mailbox === INBOX_ID){
                        FAVICON.badge(data.unseen);
                    }
                    [].slice.call(document.querySelectorAll('.unseen-counter-' + data.mailbox)).forEach(function(row){
                        if(data.unseen){
                            row.style.display = 'block';
                            row.textContent = data.unseen;
                        }else {
                            row.style.display = 'none';
                            row.textContent = 0;
                        }
                    });
                }
                break;
            }
        }
    };
});
</script>
