<div class="content-header">
    <div class="row">
        <div class="col-md-8">
            <h2>{{::vm.translate.get('Widget Instances')}}</h2>
        </div>
        <div class="col-md-4 text-right">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-plus"></span> {{::vm.translate.get('Create Widget')}}<span class="caret"></span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li ng-repeat="widget in vm.widgets">
                        <a ui-sref="{{widget.createUrl}}">{{widget.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<table class="table table-striped">
    <thead>
    <tr>
        <th>{{::vm.translate.get('Name')}}</th>
        <th>{{::vm.translate.get('Widget Type')}}</th>
        <th>{{::vm.translate.get('Widget Zone')}}</th>
        <th>{{::vm.translate.get('Publish Start')}}</th>
        <th>{{::vm.translate.get('Publish End')}}</th>
        <th>{{::vm.translate.get('Display order')}}</th>
        <th>{{::vm.translate.get('Actions')}}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="instance in vm.widgetInstances">
        <td>{{instance.name}}</td>
        <td>{{instance.widgetType}}</td>
        <td>{{instance.widgetZone}}</td>
        <td>{{instance.publishStart | date:'medium'}}</td>
        <td>{{instance.publishEnd | date:'medium'}}</td>
        <td>{{instance.displayOrder}}</td>
        <td>
            <a ui-sref="{{instance.editUrl}}({id: instance.id})" title="Edit" class="btn btn-primary btn-xs"> <i class="fa fa-pen"></i></a>
            <button ng-click="vm.deleteWidgetInstance(instance)" class="btn btn-danger btn-xs delete"> <i class="fas fa-times-circle"></i></button>
        </td>
    </tr>
    </tbody>
</table>
