<div class="umb-lightbox" ng-attr-umb-focus-lock="true">

    <div class="umb-lightbox__backdrop" ng-click="close()" hotkey="esc"></div>

    <button type="button" umb-auto-focus class="btn-reset umb-lightbox__close" localize="title" title="@general_close" ng-click="close()">
        <umb-icon icon="icon-delete" class="umb-lightbox__control"></umb-icon>
        <span class="sr-only">
            <localize key="general_close">Close</localize>
        </span>
    </button>

    <div class="umb-lightbox__images">
        <div class="umb-lightbox__image shadow-depth-2" ng-repeat="item in items" ng-show="$index === activeItemIndex">
            <img ng-src="{{ item.source }}" />
        </div>
    </div>

    <button type="button" class="btn-reset umb-lightbox__control -prev" localize="title" title="@general_previous" ng-if="activeItemIndex > 0" ng-click="prev()" hotkey="left">
        <umb-icon icon="icon-previous" class="umb-lightbox__control-icon"></umb-icon>
        <span class="sr-only">
            <localize key="general_previous">Previous</localize>
        </span>
    </button>

    <button type="button" class="btn-reset umb-lightbox__control -next" localize="title" title="general_next" ng-if="activeItemIndex + 1 < items.length" ng-click="next()" hotkey="right">
        <umb-icon icon="icon-next" class="umb-lightbox__control-icon"></umb-icon>
        <span class="sr-only">
            <localize key="general_next">Next</localize>
        </span>
    </button>

</div>
