<div class="modal-header">
    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">
        <i class="fa fa-paperclip"></i> Secure Attachments <small>{{cipher.name}}</small>
    </h4>
</div>
<form name="form" ng-submit="form.$valid && save(form)" api-form="savePromise" autocomplete="off">
    <div class="modal-body">
        <div ng-if="loading">
            Loading...
        </div>
        <div ng-if="!loading && !cipher.attachments.length">
            There are no attachments for this item.
        </div>
        <div class="table-responsive" ng-if="cipher.attachments.length" style="margin: 0;">
            <table class="table table-striped table-hover table-vmiddle" style="margin: 0;">
                <tbody>
                    <tr ng-repeat="attachment in cipher.attachments | orderBy: ['fileName']">
                        <td style="width: 70px;">
                            <div class="btn-group" data-append-to=".modal">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-cog"></i> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#" stop-click ng-click="download(attachment)">
                                            <i class="fa fa-fw fa-download"></i> Download
                                        </a>
                                        <a href="#" stop-click ng-click="remove(attachment)" class="text-red"
                                           ng-show="!readOnly">
                                            <i class="fa fa-fw fa-trash"></i> Delete
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td>
                            <a href="#" stop-click ng-click="download(attachment)">{{attachment.fileName}}</a>
                            <i class="fa fa-spinner fa-spin text-muted" ng-if="attachment.loading"></i>
                        </td>
                        <td style="width: 90px; min-width: 90px;">
                            {{attachment.size}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div ng-if="!readOnly">
            <hr />
            <h4>Add New Attachment</h4>
            <div class="callout callout-warning" ng-if="!canUseAttachments">
                <h4>Premium Membership Required</h4>
                <p>Premium membership is required to use this feature.</p>
                <button type="button" class="btn btn-default btn-flat" ng-click="showUpgrade()">Learn More</button>
            </div>
            <div class="callout callout-danger validation-errors" ng-show="form.$errors">
                <h4>Errors have occurred</h4>
                <ul>
                    <li ng-repeat="e in form.$errors">{{e}}</li>
                </ul>
            </div>
            <div class="form-group" show-error ng-if="canUseAttachments">
                <label for="file" class="sr-only">File</label>
                <input type="file" id="file" name="file" />
                <p class="help-block">Maximum size per file is 100 MB.</p>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading" ng-if="!readOnly && canUseAttachments">
            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Save
        </button>
        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
    </div>
</form>
