<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="passwordHistoryTitle">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="box">
                    <div class="box-header" id="passwordHistoryTitle">
                        {{'passwordHistory' | i18n}}
                    </div>
                    <div class="box-content condensed">
                        <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
                            <div class="row-main">
                                <span class="text monospaced">
                                    {{h.password}}
                                </span>
                                <span class="detail">{{h.lastUsedDate | date:'medium'}}</span>
                            </div>
                            <div class="action-buttons">
                                <a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
                                    (click)="copy(h.password)" role="button">
                                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                        <div class="box-content-row" *ngIf="!history.length">
                            {{'noPasswordsInList' | i18n}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
            </div>
        </div>
    </div>
</div>
