<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>

<section class="overlay" ng-if="showCreateModal" ng-click="closeCreateModal()"></section>

<!-- Modal Delete Dialog Template -->
<script type="text/ng-template" id="deleteModalListForms.html">
	<div class="modal-header">
		<h2 class="modal-title hidden-md hidden-lg">{{ 'ARE_YOU_SURE' | translate }}</h2>
		<h3 class="modal-title hidden-xs hidden-sm">{{ 'ARE_YOU_SURE' | translate }}</h3>
	</div>
	<div class="modal-body">
		<div class="modal-body-alert">
			{{ 'READ_WARNING' | translate }}
		</div>
		<p class="hidden-xs hidden-sm">
			{{ 'DELETE_WARNING1' | translate }} <strong>{{content.currFormTitle}}</strong> {{ 'DELETE_WARNING2' | translate }}
		</p>
		<p>{{ 'DELETE_CONFIRM' | translate }}</p>
	</div>
	<div class="modal-footer">
		<input type="text" style="width:100%" data-ng-model="deleteConfirm" class="input-block" autofocus required aria-label="Type in the name of the form to confirm that you want to delete this form.">
		<button type="submit" ng-click="deleteForm()" class="btn btn-block btn-danger" ng-disabled="content.currFormTitle != deleteConfirm">
			{{ 'I_UNDERSTAND' | translate }}
		</button>
	</div>
</script>

<section data-ng-controller="ListFormsController as ctrl" data-ng-init="findAll()" class="container">
	<br>
	<div class="row">
		<div class="col-xs-4 col-xs-offset-4">
			<h3 class="text-center forms-list-title">
				{{ 'MY_FORMS' | translate }}
			</h3>
		</div>
	</div>
	<div class="row">
		<div ng-click="openCreateModal()" class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item create-new">
			<div class="title-row col-xs-12">
				<h4 class="fa fa-plus fa-6"></h4>
			</div>
			<div class="col-xs-12 details-row">

				<small class="list-group-item-text">
					{{ 'CREATE_A_NEW_FORM' | translate }}
				</small>

			</div>
		</div>

		<form name="forms.createForm" class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item create-new new-form" ng-if="showCreateModal">
			<div class="title-row row">
				    <div class="col-xs-5 field-title text-left"> {{ 'NAME' | translate }} </div>
				    <div class="col-xs-12 field-input">
						<input type="text" name="title" required ng-model="formTitle" ng-pattern="languageRegExp" ng-minlength="4" style="color:black;"/>
				    </div>
			</div>
			<div class="details-row row">
			    <div class="col-xs-5 field-title text-left"> {{ 'LANGUAGE' | translate }} </div>
			    <div class="col-xs-12 field-input">
				    <div class="button custom-select">
						<select style="color:black;" name="language" required ng-model="formLanguage" ng-init="formLanguage = user.language">
							<option ng-repeat="language in languages" value="{{language}}">
								{{language}}
							</option>
				        </select>
				    </div>
			    </div>
			</div>
			<div class="details-row submit row">
			    <div class="col-xs-12 field-title text-center">
			    	<button class="btn btn-primary" ng-disabled="forms.createForm.$invalid" ng-click="createNewForm()">
						{{ 'CREATE_FORM' | translate }}
			    	</button>
			    </div>
			</div>
		</form>

		<div data-ng-repeat="form in myforms"
            class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-1 col-md-3 col-md-offset-1 form-item container"
			 ng-class="{'paused': !form.isLive}">

			<div class="row">
				<span class="pull-right">
					<i style="cursor:pointer;" class="fa fa-trash-o" ng-click="openDeleteModal($index)"></i>
					<i style="cursor:pointer;" class="fa fa-files-o" ng-click="duplicateForm($index)"></i>
				</span>
			</div>

			<div class="row">
				<a data-ng-href="#!/forms/{{form._id}}/admin/create"
					class="title-row col-xs-12" style="color: white;">
					<h4 class="list-group-item-heading" data-ng-bind="form.title"></h4>
				</a>
				<div class="col-xs-12 responses-row">
					<small class="list-group-item-text">
						<span> {{ form.submissions.length }} {{ 'RESPONSES' | translate }} </span>
					</small>
					<br>
					<br>
					<small ng-if="!form.isLive" class="list-group-item-text">
						<span> {{ 'FORM_PAUSED' | translate }} </span>
					</small>
				</div>
			</div>
		</div>
	</div>
</section>
