{% extends "infoscreen:base.html" %}

{% load i18n %}
{% load static %}
{% load staticfiles %}

{% block appname %}infoAdmin{% endblock appname %}

{% block title %}
{% trans "Infoscreen admin" %}
{% endblock title %}

{% block styles %}
<link rel="stylesheet" href="{% static "css/admin.css" %}"></link>
{% endblock styles %}

{% block controllers %}
<script src="{% static "js/infoadmin_controllers.js" %}"></script>
{% endblock controllers %}

{% block body %}
<div id="header" class="row">
    <div class="logout-button">
        <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" ng-controller="infoadmin_ctrl">
    <div class="row">
        <div class="col-md-12">
            <h1>{% trans "Infoscreen Admin Pane" %}</h1>
        </div>
    </div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a data-toggle="tab" href="#slides" role="tab">{% trans "Manage Slides" %}</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" href="#">{% trans "Manage Rotations" %}<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li ng-repeat="r in rotations"><a href="#rotations" ng-click="selectRotation(r.id)" data-toggle="tab">{$ r.name $}</a></li>
                <li class="divider">
                <li class="nav-item"><a data-toggle="tab" href="#deleterot" role="tab">{% trans "Create/Delete" %}</a></li>
            </ul>
    </ul>
    <div class="tab-content row">
        <div id="slides" class="tab-pane active">
            <div ng-controller="infoadmin_ctrl">
                <div class="col-xs-12 col-md-6">
                    <h2>{% trans "Create new item" %}</h2>
                    <div>{% trans "Create a new item by type" %}</div>
                    <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 | orderBy: 'name'">
                                    <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 "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 "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="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div id="rotations" class="tab-pane" 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 "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-xs-12 col-md-6">
                <h2>{% trans "Rotation" %}: {$ selected_rot.name $}<a href="/infoscreen/{$ selected_rot.id $}"><input type="button" class="btn btn-primary pull-right" value="{% trans "Preview" %}"></a></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 id="deleterot" class="tab-pane">
            <div class="col-xs-12 " ng-controller="infoadmin_ctrl">
                <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 "Preview" %}</th>
                        <th>{% trans "Delete" %}</th>
                    </tr>
                    <tr ng-repeat="r in rotations">
                        <td>{$ r.name $}</td>
                        <td>{$ r.id $}</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>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div style="margin-top: 100px;">
        {% include "footer.html" %}
    </div>
</div>
{% endblock body %}