{% load i18n %}

<div id="rotations" class="tab-pane fade" role="tabpanel" ng-controller="infoadmin_ctrl">
    <div class="col">
        <h2>{% trans "Info items" %}</h2>
        <div>{% trans "Infoitems available for rotations" %}</div>
        <table class="table table-striped">
            <tr>
                <th>{% trans "Item" %}</th>
                <th>{% trans "Type" %}</th>
                <th>{% trans "Set duration" %}</th>
                <th>{% trans "Add to rotation" %}</th>
                <th>{% trans "Delete" %}</th>
            </tr>
            <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
                <td>{$ i.name $}</td>
                <td>{$ i.display_name $}</td>
                <td><input type="number" min="1" max="60" class="form-control" ng-model="i.duration"></input></td>
                <td><input type="button" class="btn btn-success" ng-click="createInstance(selected_rot.id, i.id, i.item_type, i.duration);" value="{% trans "Add" %}"></input></td>
                <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
            </tr>
        </table>

    </div>

    <div class="col">
        <div class="rotation-title-row">
            <h2>{% trans "Rotation" %}: {$ selected_rot.name $}</h2>
            <a class="btn btn-primary" href="/infoscreen/{$ selected_rot.id $}">{% trans "Preview" %}</a>        
        </div>
        <div>{% trans "Instances in currently selected rotation" %}:</div>
        <table class="table table-striped">
            <tr>
                <th>{% trans "Instance" %}</th>
                <th>{% trans "Duration" %}</th>
                <th>{% trans "Delete" %}</th>
            </tr>
            <tr ng-repeat="i in selected_rot.instances">
                <td>{$ i.item.name $}</td><td>{$ i.duration $} s</td>
                <td><input type="button" ng-click="deleteInstance(i.id);" value="{% trans "Delete" %}" class="btn btn-danger"></input></td>
            </tr>
        </table>
    </div>
</div>