<style>
    .chat-bubble-arrow-border {
        border-color: transparent transparent #bdc4c9 transparent;
        border-style: solid;
        border-width: 9px;
        height: 0;
        width: 0;
        position: absolute;
        top: -18px;
        right: 30px;
    }

    .chat-bubble-arrow {
        border-color: transparent transparent #fff transparent;
        border-style: solid;
        border-width: 9px;
        height: 0;
        width: 0;
        position: absolute;
        top: -17px;
        right: 30px;
    }

    #file-history .modal-body {
        padding: 8px 16px;
        max-height: 300px;
        overflow: auto;
    }

    #file-history .history-item {
        padding: 8px 0;
    }

    #file-history .history-item .history-tag {
        margin-bottom: 4px;
    }

    #file-history .history-item .file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    #file-history .history-item:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    #file-history .history-action {
        padding-right: 8px;
        margin-top: 8px;
        font-size: 14px;
        color: #5bc0de;
        font-weight: normal;
    }

    #file-history .history-action:hover {
        text-decoration: underline;
    }
</style>
<div id="file-history">
    <div class="modal-header bg-698-blue">
        <h4 class="modal-title text-white" id="modal-title">{{'MY_EMAIL.VERSION_HISTORY' | translate}}</h4>
        <button ng-click="onClose()" type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="modal-body" id="modal-body">
        <div ng-show="loading"><span ng-i18next="button.load"></span></div>
        <div class="row history-item" ng-repeat="version in fileVersions">
            <div class="col-12 history-tag">
                <!--version & current tag-->
                <label class="badge badge-info">V<span ng-bind="version.version"></span></label>
                <label class="badge badge-primary" ng-if="version.current">{{'MY_EMAIL.CURRENT' | translate}}</label>
            </div>
            <div class="col-12">
                <!--history name-->
                <strong class="file-name" ng-bind="version.title" title="{{version.title}}"></strong>
            </div>
            <div class="col-12">
                <!--upload information-->
                <span>
                {{'MY_EMAIL.UPLOADED_ON' | translate: {date: version.create_date, user: version.full_name} }}
            </span>
            </div>
            <div class="col-12" ng-if="!version.current">
                <!--btn download-->
                <label class="history-action"
                       role="button"
                       ng-click="doDownloadFileVersion(version)">{{'COMMON.DOWNLOAD' | translate}}</label>

                <!--btn make current-->
                <label class="history-action"
                       role="button"
                       ng-click="makeCurrent(version)">{{'MY_EMAIL.MAKE_CURRENT' | translate}}</label>
                <!--btn delete version-->
                <label class="history-action"
                       role="button"
                       data-toggle="dropdown"
                       aria-expanded="true">{{'CONTEXT_MENU.REMOVE' | translate}}</label>

                <!--popup confirm delete version-->
                <div class="dropdown-menu" role="menu" style="padding: 0.5rem;">
                    <div class="chat-bubble-arrow-border"></div>
                    <div class="chat-bubble-arrow"></div>
                    <div class="popover-content" style="display: inline-block;font-size: 14px;">{{'MY_EMAIL.CONFIRM_DELETE_VERSION' | translate}}</div>
                    <div class="navbar-form text-right" style="display: inline-block;">
                        <button class="btn btn-danger btn-sm"
                                ng-click="removeVersion(version)">{{'COMMON.BUTTON_OK' | translate}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-outline-dark" type="button" ng-click="onClose()">{{'COMMON.BUTTON_CANCEL' | translate}}</button>
    </div>
</div>

