{% extends "base.html" %}
{% block title %}TIM{% endblock %}
{% block head %}
{{ super() }}
<script src="{{url_for('static', filename='scripts/indexView/indexController.js')}}"></script>
<script src="{{url_for('static', filename='scripts/indexView/indexApp.js')}}"></script>
<script>
    var groups = {{userGroups|tojson|safe}};
    var folder = "{{folder}}";
</script>

<style type="text/css">
table {
	margin: 1em;
	border: none;
}

thead {
	font-weight: bold;
	border: none;
}

table td {
	padding: 0.2em;
	border: none;
}

.uploadForm {
	border: 1px solid black;
	padding: 1em;
}

.material { 
	padding: 1em;
}
</style>
{% endblock %}
{% block content %}
<div ng-app="indexApp" ng-controller="IndexCtrl">
        <span ng-show="displayIndex">Welcome! Start by choosing a document to view: </span> <img
            src="{{url_for('static', filename='images/loading.gif')}}" ng-show="!displayIndex">
        <div ng-show="displayIndex == 2">
            <table ng-show="documentList.length > 0 || folderList.length > 0 || parentfolder != null">
                <thead>
                    <tr>
                    	<td></td>
                        <td>Document name</td>
                        <td></td>
                        <td>Last modified</td>
                        <td>Owner</td>
                        <td>Rights</td>
                    </tr>
                </thead>
                <tr ng-show="parentfolder != null">
                    <td>
                	    <!--<a href="?folder={{ '{{ parentfolder | escape }}' }}">-->
                        <a href="/view/{{ '{{ parentfolder | escape }}' }}">
                	        <img src="{{url_for('static', filename='images/folder.png')}}"/>
                	    </a>
                	</td>
                	<!--<td><a href="?folder={{ '{{ parentfolder | escape }}' }}">..</a></td>-->
                    <td><a href="/view/{{ '{{ parentfolder | escape }}' }}">..</a></td>
                	<td></td>
                	<td></td>
                	<td></td>
                    <td></td>
                </tr>
                <tr ng-repeat="doc in folderList">
                    <td>
                        <img src="{{url_for('static', filename='images/folder.png')}}"/>
                	</td>
                    <td>
                    	<a href="/view/{{ '{{ doc.fullname | escape }}' }}">{{ '{{ doc.name }}' }}</a>
                    </td>
                    <td></td>
                    <td>{{ '{{ doc.modified }}' }}</td>
                    <td>{{ '{{ doc.owner.name }}' }}</td>
                    <td>
                        <a ng-show="doc.isOwner" href="/manage/{{ '{{ doc.id }}' }}">Manage</a>
                    </td>
                </tr>
                <tr ng-repeat="doc in documentList">
                	<td></td>
                    <td>
                    	<a href="/view/{{ '{{ doc.fullname | escape }}' }}">{{ '{{ doc.name }}' }}</a>
                    </td>
                    <td></td>
                    <td>{{ '{{ doc.modified }}' }}</td>
                    <td>{{ '{{ doc.owner.name }}' }}</td>
                    <td>
                        <a ng-show="doc.canEdit" href="/view/{{ '{{ doc.id }}' }}">Edit</a>
                        <a ng-show="doc.isOwner" href="/manage/{{ '{{ doc.id }}' }}">Manage</a>
                        <a ng-show="doc.isOwner" href="/teacher/{{ '{{ doc.fullname | escape }}' }}">Teacher</a>
                    </td>
                </tr>
            </table>
            <p ng-show="documentList.length == 0 && folderList.length == 0">There are no documents to show.</p>
            {% if session.user_id %}
            <a ng-click="setCurrentDocument({})">Upload a new document</a>
            <div class="uploadForm" ng-show="m.currDoc">
                <p ng-show="m.currDoc.id">Upload new version for document: {{ '{{ m.currDoc.name
                    }}' }}</p>
                <p ng-show="!m.currDoc.id">Upload a new document</p>
                <input type="file"
                    ng-file-select="m.currDoc.id ? updateDocument(m.currDoc, $files) : onFileSelect('/upload/', $files)">
                <span ng-bind="progress"></span>
                <input ng-disabled="uploadInProgress" type="button"
                    value="{{ '{{ progress && !uploadInProgress ? \'Close\' : \'Cancel\' }}' }}"
                    ng-click="m.currDoc = 0">
            </div>
            <div>
                <a ng-show="!showControls" ng-click="showControls = true">Create a new document</a>
                <div ng-show="showControls">
                    <label>
                        Document name:
                        <input ng-model="docName" type="text">
                    </label>
                    <input ng-disabled="!docName" ng-click="createDocument(docName)" type="button"
                        value="Create">
                    <input ng-click="showControls = false" type="button" value="Cancel">
                </div>
            </div>
            <div>
                <a ng-show="!showCreateFolder" ng-click="showCreateFolder = true">Create a new folder</a>
                <div ng-show="showCreateFolder">
                    <label>
                        Folder name:
                        <input ng-model="folderName" type="text">
                    </label>
                    <label>
                        Owner:
                        <select ng-model="folderOwner"
                                ng-options="group.name for group in userGroups track by group.id"/>
                    </label>
                    <input ng-disabled="!folderName || !folderOwner" ng-click="createFolder(folderName, folderOwner.id)" type="button"
                        value="Create">
                    <input ng-click="showCreateFolder = false" type="button" value="Cancel">
                </div>
            </div>
            {% else %}
            To create or upload new documents, log in.
            {% endif %}
        </div>
    </div>
{% endblock %}