tasks/templates/main.php

<div ng-app="Tasks" ng-cloak ng-controller="AppController" ng-click="closeAll($event)" id="tasks_wrapper" class="handler">
    <div id="app-navigation" ng-controller="ListController">
        <ul id="collections">
            <li ng-repeat="collection in collections" id="collection_{{ collection.id }}" rel="{{ collection.id }}"
                    ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.listID}" oc-drop-task>
                <a href="#/lists/{{ collection.id }}">
                        <span class="icon collection-{{ collection.id }}"><text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text></span>
                        <span class="count">{{ getCollectionString(collection.id) }}</span>
                        <span class="title"><text>{{ collection.displayname }}</text></span>
                </a>
            </li>
            <li ng-repeat="list in lists" id="list_{{ list.id }}" rel="{{ list.id }}" class="with-menu" ng-class="{active: list.id==route.listID}" oc-drop-task>
                <a href="#/lists/{{ list.id }}" style="border-right: 4px solid {{ list.calendarcolor }};">
                    <span class="icon list-list"></span>
                    <span class="title"><text ng-dblclick="editName(list.id)" oc-click-focus="{selector: 'input.edit', timeout: 0}">{{ list.displayname }}</text></span>
                </a>
                <div class="app-navigation-entry-utils">
                    <ul>
                        <li class="app-navigation-entry-utils-counter"><text ng-show="getListCount(list.id,'all')">{{ getListCount(list.id,'all') }}</text></li>
                        <li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
                    </ul>
                </div>
                <div class="app-navigation-entry-menu">
                    <ul>
                        <li><button class="icon-rename svg" title="rename" ng-click="editName(list.id)"></button></li>
                        <li><button class="icon-delete svg" title="delete" ng-click="deleteList(list.id)" ng-show="showDelete(list.id)"></button></li>
                    </ul>
                </div>
                <input ng-model="list.displayname" class="edit handler" type="text" ng-show="route.listparameter=='name' && route.listID == list.id" stop-event="click"
                    ng-keydown="checkName($event)">
            </li>
            <li>
                <a class="addlist handler" ng-click="startAddingList()" stop-event="click" oc-click-focus="{selector: '#newList', timeout: 0}">
                    <span class="icon detail-add"></span>
                    <span class="title"><text><?php p($l->t('Add List...')); ?></text></span>
                    <input id="newList" ng-model="status.newListName" class="edit" type="text" ng-disabled="isAddingList" ng-show="status.addingList"
                        stop-event="click" placeholder="<?php p($l->t('New List')); ?>" ng-keydown="checkListInput($event)" />
                </a>
            <li>
        </ul>
        <div id="app-settings" ng-controller="SettingsController">
            <div id="app-settings-header">
                <button class="settings-button" data-apps-slide-toggle="#app-settings-content"></button>
            </div>
            <div id="app-settings-content">
                <h2><label for="startOfWeek"><?php p($l->t('Start of week')); ?></label></h2>
                <select id="startOfWeek" ng-change="setStartOfWeek()" ng-model="settingsmodel.getById('various').startOfWeek" ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions"></select>
                <h2 class="bold"><?php p($l->t('Visibility of Smart Collections')); ?></h2>
                <ul>
                    <li ng-repeat="collection in collections">
                        <span class="icon collection-{{ collection.id }}"><text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text></span>
                        <label for="visibilityCollection-{{collection.id}}" class="title"><text>{{ collection.displayname }}</text></label>
                        <select id="visibilityCollection-{{collection.id}}" ng-change="setVisibility(collection.id)" ng-model="collection.show" ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions"></select>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="app-content" ng-controller="TasksController" ng-class="{'details-visible':route.taskID}">
        <div class="content-wrapper">
        	<div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
                <a class="input-star">
                    <span class="icon input-star"></span>
                </a>
                <a class="input-date">
                    <span class="icon input-date"></span>
                </a>
                <form ng-submit="addTask(taskName)" name="addTaskForm">
                    <input id="target" ng-disabled="isAddingTask" ng-click="focusInput()" class="transparent" placeholder="{{ getAddString() }}" ng-model="taskName"
                        ng-keydown="checkTaskInput($event)"/>
                </form>
            </div>
            <div class="task-list" ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
                <?php print_unescaped($this->inc('part.tasklist')); ?>
                <?php print_unescaped($this->inc('part.collectionall')); ?>
                <?php print_unescaped($this->inc('part.collectionweek')); ?>
                <div id="searchresults"></div>
                <div class="task-item template">
                    <div class="task-body">
                        <div class="percentdone"></div>
                        <a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()">
                            <span class="icon task-checkbox"></span>
                        </a>
                        <a class="icon task-separator"></a>
                        <a class="task-star" ng-click="toggleStarred(task.id)">
                            <span class="icon task-star faded"></span>
                        </a>
                        <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a>
                        <div class="title-wrapper">
                            <span class="title"></span>
                            <span class="icon task-attachment"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="task-details" ng-class="{'details-visible':route.taskID}">
            <div class="content-wrapper">
                <?php print_unescaped($this->inc('part.details')); ?>
            </div>
        </div>
    </div>
</div>