<div class="popover dropdown-menu datepicker" ng-class="'datepicker-mode-' + $mode" style="max-width: 320px;">
    <div class="arrow"></div>
    <div class="popover-header">
        <span translate="TASK.TITLE.SELECT-DATE"></span>
        <div class="actions">
            <a ng-click="closeDatePopup(field); $hide()">{{'GENERAL.ACTION.CLOSE' | translate}}</a>
        </div>
    </div>
    <div class="popover-content">
        <div class="center">
            <div class="btn-group span">
                <button class="btn btn-xs" ng-click="clearDate(field, $select); $hide()" translate="TASK.ACTION.CLEAR-DATE"></button>
                <button class="btn btn-xs" ng-click="selectToday(field, $select); $hide()" translate="TASK.ACTION.DATE-TODAY"></button>
            </div>
        </div>
        <div class="section">
            <table style="table-layout: fixed; height: 100%; width: 100%;">
                <thead>
                <tr class="text-center">
                    <th>
                        <button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$selectPane(-1)">
                            <i class="{{$iconLeft}}"></i>
                        </button>
                    </th>
                    <th colspan="{{ rows[0].length - 2 }}">
                        <button tabindex="-1" type="button" class="btn btn-default btn-block text-strong"  ng-click="$toggleMode()">
                            <strong style="text-transform: capitalize;" ng-bind="title"></strong>
                        </button>
                    </th>
                    <th>
                        <button tabindex="-1" type="button" class="btn btn-default pull-right" ng-click="$selectPane(+1)">
                            <i class="{{$iconRight}}"></i>
                        </button>
                    </th>
                </tr>
                <tr ng-show="showLabels" ng-bind-html="labels"></tr>
                </thead>
                <tbody class="calendar-grid">
                <tr ng-repeat="(i, row) in rows" height="{{ 100 / rows.length }}%">
                    <td class="text-center" ng-repeat="(j, el) in row">
                        <button tabindex="-1" type="button" class="btn btn-default" style="width: 100%" ng-class="{'btn-primary': el.selected, 'btn-info btn-today': el.isToday && !el.selected}" ng-click="$select(el.date)" ng-disabled="el.disabled">
                            <span ng-class="{'text-muted': el.muted}" ng-bind="el.label"></span>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>