<!--
ARCHES - a program developed to inventory and manage immovable cultural heritage.
Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
{% extends "base-manager.htm" %}
{% load static %}
{% load i18n %}

{% block main_content %}

<div>

    <!--ko if: mobilesurveys().length === 0 -->
        <div id="rr-splash" class="rr-splash">

            <!-- Image -->
            <div class="img-circle rr-splash-img-container surveys">
                <img class="rr-splash-img" src="{% static "img/multiple_inputs.png" %}" alt="Resource Editor">
            </div>

            <!-- Splash Title -->
            <div class="rr-splash-title">{% trans "Mobile Data Collection" %}</div>

            <!-- Splash Button -->
            <button class="btn btn-shim btn-rr btn-labeled btn-lg fa fa-globe" data-bind="click: newMobileSurvey">{% trans 'Create a Project' %}</button>

            <!-- Splash Instructions -->
            <div class="rr-splash-description">{% trans "Arches allows you to create and edit data in the field using mobile devices such as" %}</div>
            <div class="rr-splash-description">{% trans "Android and iOS phones or tablets. Projects are a way to define the time, location, content, and" %}</div>
            <div class="rr-splash-description">{% trans "participants of a field data collection effort" %}</div>

            <!-- Help Hyperlink; Add here -->

        </div>
    <!--/ko-->

    <!--ko if: mobilesurveys().length > 0 -->
        <div data-bind="visible: mobilesurveys().length > 0" style="width: 100%;">
                <!-- Layer Filter -->
                <div class="list-filter mpm" data-bind="">
                    <div class="msm-list-filter">
                    <div>
                        <button id="" class="btn btn-lg btn-mint btn-active-dark btn-labeled ion-plus-round" data-bind="click: newMobileSurvey">{% trans "New Project" %}</button>
                    </div>
                    <div class="msm-list-filter-input">
                    <input type="text" class="form-control" placeholder="{% trans 'Find a project...' %}" data-bind="value: mobileSurveyFilter, valueUpdate: 'keyup'">
                    <!-- Clear Search -->
                    <span class="clear-node-search" data-bind="visible: mobileSurveyFilter().length > 0, click: function() { mobileSurveyFilter(''); }"><i class="fa fa-times-circle"></i></span>
                </div>
               </div>
          </div>


        <!-- Survey Listing Panel-->
        <div class="mpm-list">
            <div class="grid mpm" style="display:none;" data-bind="visible: true">
                <div id="page-content" style="padding: 0 50px 240px; margin-top: -1px;">
                    <div class="report-image-grid mpm">
                        <!-- ko foreach: filteredMobileSurveys() -->
                        <div class="resource-grid-item mpm-manager relative">
                            <div class="resource-grid-main-container mpm" data-bind="click: $parent.navigateToEditor">
                                <div class="resource-grid-main mpm-manager">
                                    <div class="title-items" style="display:flex; flex-direction: column;">

                                        <i class="icon-wrap resource-grid-icon fa fa-globe"></i>


                                        <div class="mpm-title"><span data-bind="text: name() === '' ? '{% trans "Unnamed Project" %}' : name()"></span></div>

                                        <!--ko if: enddate && startdate -->
                                        <div class="mpm-subtitle">
                                            <span data-bind="text: starts + '{% trans " to " %}' + ends"> </span>
                                            <!--ko if: expired -->
                                            <span style="color: red; font-weight: 300">{% trans '(expired)' %}</span>
                                            <!--/ko -->
                                        </div>
                                        <!--/ko -->
                                        <!--ko ifnot: enddate && startdate -->
                                        <div class="mpm-subtitle" data-bind="text: '{% trans "Date range unspecified" %}'"></div>
                                        <!--/ko -->
                                    </div>
                                </div>
                            </div>
                            <div class="resource-grid-tools-container mpm-manager">

                                <button class="btn btn-shim btn-rr graph-btn btn-labeled btn-sm fa fa-trash" data-bind="click: function(val){$parent.deleteMobileSurvey(val)}, clickBubble: false, css: {'disabled': active()}" aria-expanded="true">{% trans 'delete' %}</button>

                                <div>
                                    <p class="resource-status-label">
                                    {% trans "Status" %}: <span class="resource-status" data-bind="text:active()?'{% trans "Active" %}':'{% trans "Inactive" %}'"></span>
                                    </p>
                                </div>

                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ko-->

</div>

{% endblock main_content %}

{% block tabs %}{% endblock tabs %}

{% block pre_require_js %}
{{block.super}}
    <script>
        {% autoescape off %}define('mobile-survey-manager-data', [], function() {
            return {
                mobilesurveys: {{mobile_surveys}}
            };
        });{% endautoescape %}
    </script>
{% endblock pre_require_js %}
