{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html ng-app="infoAdmin">
    <head>
        <meta charset="utf-8">
        <title>Infoscreen admin</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
        <script src="/static/js/ng-file-upload-bower-12.2.11/ng-file-upload-all.js"></script>
        <script src="/static/js/infoadmin_controllers.js"></script>
    </head>
    <body>
        <div id="header" class="row">
            <div class="col-xs-1 col-xs-offset-11 col-sm-1 col-lg-1">
                <form action="/logout" method="post"> {% csrf_token %}
                    <input type="Submit" value="{% trans "Log out" %}" name="Logout" class="btn btn-danger"/>
                </form>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>{% trans "Infoscreen Admin Pane" %}</h1>
                </div>
            </div>
            <div class="row" ng-controller="infoadmin_ctrl">
                <div class="col-xs-12 col-md-6">
                    <h2>{% trans "Info items" %}</h2>
                    <div>{% trans "Infoitems available for rotations" %}</div>
                    <table class="table table-striped">
                        <tr>
                            <th>{% trans "Item" %}</th>
                            <th>{% trans "Set duration" %}</th>
                            <th>{% trans "Add to rotation" %}</th>
                            <th>{% trans "Delete" %}</th>
                        </tr>
                        <tr ng-repeat="i in infoitems">
                            <td>{$ i.name $}</td>
                            <td><input type="text" 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>
                    <h2>{% trans "Create new item" %}</h2>
                    <table class="table table-striped">
                        <tr>
                            <td>{% trans "Item type" %}</td>
                            <td>
                                <select class="form-control form-control-sm" ng-model="createtype", ng-options="t.name for t in infotypes">
                                    <option value=""></option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <div ng-include="createtype.create_template_url"></div>
                </div>
                <div class="col-xs-12 col-md-6">
                    <h2>{% trans "Rotations" %}</h2>
                    <div>
                        {% trans "Select rotation to edit" %}:
                    </div>
                    <table class="table table-striped">
                        <tr>
                            <th>{% trans "Rotation" %}</th>
                            <th>{% trans "id" %}</th>
                            <th>{% trans "Select" %}</th>
                            <th>{% trans "Preview" %}</th>
                            <th>{% trans "Delete" %}</th>
                        </tr>
                        <tr ng-repeat="r in rotations">
                            <td>{$ r.name $}</td>
                            <td>{$ r.id $}</td>
                            <td><input type="button" class="btn btn-info" ng-click="selectRotation(r.id)" value="{% trans "Select" %}"></td>
                            <td><a href="/infoscreen/{$ r.id $}"><input type="button" class="btn btn-primary" value="{% trans "Preview" %}"></a></td>
                            <td><input type="button" class="btn btn-danger" ng-click="deleteRotation(r.id)" value="{% trans "Delete" %}"></input></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control" ng-model="r.name" placeholder="{% trans "Name" %}"></input></td>
                            <td><input type="button" class="btn btn-success" ng-click="createRotation(r.name)" value="{% trans "Create new" %}"></input></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>

                    <h2>{% trans "Rotation" %}: {$ selected_rot.name $}</h2>
                    <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>
            <div style="margin-top: 100px;">
                {% include "footer.html" %}
            </div>
        </div>
    </body>
</html>
