@Master['masterpage.html']

@Section['CSS']
<link href="/CSS/bootstrap-toggle.min.css" rel="stylesheet">
<style>
    .fa {
        cursor: pointer;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background-color: #eaeaea;
        border-left: 1px solid #ccc;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #aaa;
        }
</style>
@EndSection

@Section['Content']
<div class="row">
    <div class="col-md-offset-4 col-md-4">
        <div class="btn-group center-block">
            <button onclick="ADDPage()" class="btn btn-default">Neue Seite anlegen</button>
            <button onclick="SortPages()" class="btn btn-default">Seiten sortieren</button>
            <button onclick="ADDUnit()" class="btn btn-default">Neue Dose anlegen</button>
        </div>
    </div>
</div>
<br />
<div class="row">
    <div class="col-md-2" style="min-width: 275px">
        <div class="panel panel-default">
            <div id="TempHeader" class="bg-gray list-group-item">Verfügbare Dosen</div>
            <ul class="list-group" style="overflow-x:hidden;overflow-y:auto; height: 670px;" id="units">
                @Each.Units
                <li id="@Current.ID*~*@Current.Name" data-id="@Current.ID" class="list-group-item" nowrap="nowrap">
                    <i class="fa fa-bars"></i> @Current.Name<i class="pull-right"><i onclick="EditUnit(@Current.ID)" class="fa fa-pencil-square-o"></i> <i class="js-remove fa fa-trash-o"></i></i>
                </li>
                @EndEach
            </ul>
        </div>
    </div>

    @Each.Pages
    <div class="col-md-2" style="min-width: 275px">
        <div id="name_helper_@Current.ID" hidden>@Current.Name</div>
            <div class="panel panel-default">
                <div id="Page_@Current.Name" class="bg-gray list-group-item"><img src="@Current.LogoImage" style="max-height:18px;" />&nbsp;&nbsp;@Current.Name &nbsp;&nbsp;<i onclick="EditPage(@Current.ID)" class="fa fa-pencil-square-o"></i> <i onclick="DeletePage(@Current.ID, $('#name_helper_@Current.ID').text())" class="js-remove fa fa-trash-o"></i><i class="pull-right"><input onchange="    UpdatePageState(@Current.ID, checked)" type="checkbox" @If.Enabled checked @EndIf data-toggle="toggle" data-size="mini"></i></div>
                <ul class="list-group" style="overflow-x:hidden;overflow-y:auto; height: 300px;" id="page_@Current.ID">
                    @Partial['Partials/_config_Units.html', @Current.Units];
                </ul>
            </div>
        </div>
    @EndEach
</div>
    @EndSection

    @Section['Script']
<script src="/Scripts/Sortable.js"></script>
<script src="/Scripts/bootstrap-toggle.min.js"></script>
<script src="/Scripts/conf_func.js"></script>
<script>
    var sortables = new Array();
    CreateUnitsList();
    @Each.Pages
    sortables[@Current.ID] = CreatePageList(page_@Current.ID);
    @EndEach
</script>
    @EndSection