{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | Project
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin-style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
    <style>
        .select2 {
            width: 100%!important; /* overrides computed width, 100px in your demo */
        }
        .textarea{resize: vertical;}
        .modal-header{color: inherit !important;}
        .create-note{font-weight: normal; font-style: italic;}
    </style>

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">

    {% block sidebar %}
        {% include('Admin/adminSidebar.html.twig') %}
    {% endblock %}

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <ol class="breadcrumb">
                <li><a href="{{ path('admin_dashboard') }}"><i class="fa fa-home"></i> Home</a></li>
                <li class="active"><i class="fa fa-folder-open"></i> Project</li>
            </ol>
        </section>
        {% block content %}
        <div class="box-body">
            <legend>
                {{ data.task }} Project
            </legend>
            <form
                    id="addProject"
                    action="#"
                    method="post"
                    enctype="multipart/form-data"
                    accept-charset="utf-8"
                    autocomplete="off">
                <div
                        class="panel-group"
                        id="accordion"
                        role="tablist"
                        aria-multiselectable="true">
                    <div
                            class="panel panel-default">
                        <div
                                class="panel-heading active"
                                role="tab"
                                id="project-details">
                            <h4 class="panel-title">
                                <a
                                        id="tab1"
                                        role="button"
                                        data-toggle="collapse"
                                        class="pdetails"
                                        data-parent="#accordion"
                                        href="#collapseOne"
                                        aria-expanded="true"
                                        aria-controls="collapseOne">
                                    Project details
                                </a>
                            </h4>
                        </div>
                        <div
                                id="collapseOne"
                                class="panel-collapse collapse in"
                                role="tabpanel"
                                aria-labelledby="project-details">
                            <div
                                    class="panel-body">
                                <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                                <div class="box-body">
                                    <div class="row padded">
                                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                            <div id="step1-error"></div>
                                        </div>
                                    </div>
                                    <div class="row spacing">
                                        <div class="form-group">
                                            <label
                                                    class="col-tn-12 col-xs-12 col-sm-7 col-md-6 col-lg-5 control-label"
                                                    for="radios">
                                                Is the Project a GEF Project?
                                                <i
                                                        class="fa fa-question-circle tipso"
                                                        aria-hidden="true"
                                                        title='Is the Project is GEF Project?'></i>
                                            </label>
                                            <div class="col-sm-4 col-xs-6 col-md-4 col-lg-4 col-tn-12">
                                                <label
                                                        class="radio-inline"
                                                        for="gef">
                                                    <input
                                                            type="radio"
                                                            name="project-type"
                                                            id="gef"
                                                            class="project-type"
                                                            value="1"
                                                            {% if data.project.idGef is defined and data.project.idGef != "" %}
                                                                checked="checked"
                                                            {% endif %}>
                                                    Yes
                                                </label>
                                                <label
                                                        class="radio-inline"
                                                        for="non-gef">
                                                    <input
                                                            type="radio"
                                                            name="project-type"
                                                            id="non-gef"
                                                            class="project-type"
                                                            value="2"
                                                            {% if data.project.idOther is defined and data.project.idOther != "" %}
                                                                checked="checked"
                                                            {% endif %}>
                                                    No
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-8 col-sm-8">
                                            <div
                                                    class="form-group gef-input"
                                                    {% if data.project.idGef is defined and data.project.idGef == "" %}
                                                        style="display: none"
                                                    {% endif %}>
                                                <label for="idGef">
                                                    GEF ID <i
                                                            class="fa fa-question-circle tipso"
                                                            aria-hidden="true"
                                                            title="Enter GEF - ID <br />e.g. 1234"></i>
                                                </label>
                                                <input
                                                        type="text"
                                                        name="idGef"
                                                        class="form-control"
                                                        id="idGef"
                                                        placeholder="e.g. 1234"
                                                        value="{% if data.project.idGef is defined %} {{ data.project.idGef }} {% endif %}">
                                            </div>

                                            <div
                                                    class="form-group other-input"
                                                    {% if data.project.idOther is defined and data.project.idOther == "" %}
                                                        style="display: none"
                                                    {% endif %} >
                                                <label for="idOther" >
                                                    Other ID <i
                                                            class="fa fa-question-circletipso"
                                                            aria-hidden="true"
                                                            title="Enter Other - ID <br />e.g. 1234"></i>
                                                </label>
                                                <input
                                                        type="text"
                                                        name="idOther"
                                                        class="form-control"
                                                        id="idOther"
                                                        placeholder="e.g. 1234"
                                                        value="{% if data.project.idOther is defined %}{{ data.project.idOther }}{% endif %}">
                                            </div>

                                            <div
                                                    class="form-group">
                                                <label
                                                        for="title">
                                                    Project Title<span class="req-note"><strong>*</strong></span>
                                                    <i
                                                            class="fa fa-question-circle tipso"
                                                            aria-hidden="true"
                                                            title="Enter Project title.<br/>e.g. Coastal Protected Area Management"></i>
                                                </label>
                                                <textarea
                                                        name="title"
                                                        id="title"
                                                        class="form-control"
                                                        rows="3"
                                                        placeholder="e.g. Coastal Protected Area Management"
                                                        required>
                                                    {% if data.project.title is defined %}
                                                        {{ data.project.title }}
                                                    {% endif %}
                                                </textarea>
                                            </div>

                                            <div
                                                    class="form-group">
                                                <label
                                                        for="description">
                                                    Project Description
                                                    <i
                                                            class="fa fa-question-circle tipso"
                                                            aria-hidden="true"
                                                            title="Enter Project Description."></i>
                                                </label>
                                                <textarea
                                                        name="description"
                                                        id="description"
                                                        class="form-control"
                                                        rows="10"
                                                        placeholder="Project description">
                                                    {% if data.project.description is defined %}
                                                        {{ data.project.description }}
                                                    {% endif %}
                                                </textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div
                                                class="form-group col-md-6 col-lg-3">
                                            <label
                                                    for="projectLogo">
                                                Project Logo
                                            </label>
                                            <i
                                                    class="fa fa-question-circle tipso"
                                                    aria-hidden="true"
                                                    title="Add the institute logo"></i>
                                            </label>
                                            <input
                                                    type="file"
                                                    accept="image/*"
                                                    name="projectLogo"
                                                    id="projectLogo"
                                                    class=""
                                                    value="{% if data.project.logo is defined and data.project.logo != "" %}{{ data.project.logo }}{% endif %}"
                                                    title=""
                                                    placeholder="Upload Logo" />
                                            {% if data.project.logo is defined and data.project.logo != "" %}
                                                <input
                                                        type="hidden"
                                                        name="textProjectLogo"
                                                        id="textProjectLogo"
                                                        value="{{ data.project.logo }}" >
                                            {% endif %}
                                        </div>
                                        <div
                                                class="form-group col-md-6 col-lg-3">
                                            <img
                                                    id="logo-preview"
                                                    src="{% if data.project.logo is defined and data.project.logo != "" %}{{ asset('uploads/project/'~data.project.idProject~'/'~data.project.logo)}}{% else %}#{% endif %}"
                                                    {% if data.project.logo is not defined or data.project.logo == "" %}style="display: none;" {% endif %}
                                                    alt="uploaded image"
                                                    class="img-thumbnail" />
                                            <div class="col-lg-12">
                                                <button
                                                        class="btn btn-danger btn-sm"
                                                        id="remove"
                                                        type="button"
                                                        {% if data.project.logo is not defined or data.project.logo == "" %}style="display: none;" {% endif %}>
                                                    Remove
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div
                                            class="form-group gef-input">
                                        <label
                                                for="implementing-agency">
                                            Implementing Agency <i
                                                    class="fa fa-question-circle tipso"
                                                    aria-hidden="true"></i>
                                            <span
                                                    class="create-note">
                                                Cannot find Agency? <strong><a
                                                            data-toggle="modal"
                                                            href="#modal-inst">
                                                        Create New
                                                    </a>
                                                </strong>
                                            </span>
                                        </label>
                                        <select
                                                name="implementing-agency[]"
                                                class="form-control load-institute"
                                                multiple="multiple"
                                                id="implementing-agency">
                                            {% if attribute(data.projectMeta, "Agency") is defined %}
                                                {% for agency in attribute(data.projectMeta, "Agency") %}
                                                    <option
                                                            value="{{ agency.idInst }}"
                                                            selected>
                                                        {{ agency.instName }}
                                                    </option>
                                                {% endfor %}
                                            {% endif %}#}
                                        </select>
                                    </div>

                                    <div
                                        class="form-group">
                                        <label
                                                for="implementing-agency-other">
                                            Implementing Agency (Other)
                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <select
                                                name="implementing-agency-other[]"
                                                class="form-control load-institute"
                                                id="implementing-agency-other"
                                                multiple >
                                            {% if attribute(data.projectMeta, "Implementing Agency (Other)") is defined %}
                                                {% for agency in attribute(data.projectMeta, "Implementing Agency (Other)") %}
                                                    <option
                                                            value="{{ agency.idInst }}"
                                                            selected>
                                                        {{ agency.instName }}
                                                    </option>
                                                {% endfor %}
                                            {% endif %}#}
                                        </select>
                                    </div>

                                    <div
                                            class="form-group">
                                        <label
                                                for="executing-agency">
                                            Executing Agency
                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <select
                                                name="executing-agency[]"
                                                class="form-control load-institute"
                                                id="executing-agency"
                                                multiple >
                                            {% if attribute(data.projectMeta, "Executing Agency") is defined %}
                                                {% for agency in attribute(data.projectMeta, "Executing Agency") %}
                                                    <option
                                                            value="{{ agency.idInst }}"
                                                            selected>
                                                        {{ agency.instName }}
                                                    </option>
                                                {% endfor %}
                                            {% endif %}#}
                                        </select>
                                    </div>

                                    <div
                                            class="form-group">
                                        <label
                                                for="donor-agency">
                                            Funding / Donor Agency
                                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                                        </label>
                                        <select
                                                name="donor-agency[]"
                                                class="form-control load-institute"
                                                id="donor-agency"
                                                multiple >
                                            {% if attribute(data.projectMeta, "Funding / Donor Agency") is defined %}
                                                {% for agency in attribute(data.projectMeta, "Funding / Donor Agency") %}
                                                    <option
                                                            value="{{ agency.idInst }}"
                                                            selected>
                                                        {{ agency.instName }}
                                                    </option>
                                                {% endfor %}
                                            {% endif %}#}
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="projectStatus">Project Status
                                            <i class="fa fa-question-circle tipso" aria-hidden="true" title="Select the project Status."></i></label>
                                        <select class="form-control select2" name="projectStatus" id="projectStatus">
                                            {% if data.project.projectStatus is defined %}
                                                <option  value="{{ data.project.projectStatus }}" selected>{{ data.project.projectStatus }}</option>
                                                {% endif %}
                                            {% for status in data.statuses %}
                                                <option  value="{{ status.projectStatus }}">{{ status.projectStatus }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="program-manager">Program Manager
                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                        <select name="program-manager[]" class="form-control load-expert" id="program-manager" multiple>
                                            {% if attribute(data.projectMeta, "Primary GEFSEC Program Manager") is defined %}
                                            {% for expert in attribute(data.projectMeta, "Primary GEFSEC Program Manager") %}
                                                {% if expert.idInd is defined and expert.idInd != "" %}
                                                    <option  value="{{ expert.idInd }}" selected>{{ expert.fname~" "~expert.sname }}</option>
                                                {% endif %}
                                            {% endfor %}
                                            {% endif %}
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="focal-area">Focal Area
                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                        <input type="text" name="focal-area" id="focal-area" class="form-control"
                                               value="{% if attribute(data.projectMeta, "List of project's focal areas") is defined %}{{ attribute(data.projectMeta, "List of project's focal areas") }}{% endif %}"
                                               title=""
                                               placeholder="">
                                    </div>

                                    <div class="form-group">
                                        <label for="acronym">Type Acronym
                                        </label>
                                        <input type="text" name="acronym" id="acronym" class="form-control"
                                               value="{% if attribute(data.projectMeta, "Type acronym") is defined %}{{ attribute(data.projectMeta, "Type acronym") }}{% endif %}"
                                               title=""
                                               placeholder="">
                                    </div>

                                    <div class="form-group">
                                        <label for="countries">Participating Countries
                                            <i class="fa fa-question-circle tipso" aria-hidden="true" title="Select Participating Countries"></i></label>
                                        <select name="participation-countries[]" class="form-control select2" multiple="multiple" id="countries">
                                            <option  value=""></option>
                                            {% if attribute(data.projectMeta, "List of participating countries") is defined %}
                                                {% set countries = attribute(data.projectMeta, "List of participating countries") |split(', ') %}
                                            {% else %}
                                                {% set countries = [] %}
                                            {% endif %}
                                            {% for country in data.countries %}
                                                {% if country.country not in countries %}
                                                    <option  value="{{ country.country }}">{{ country.country }}</option>
                                                {% else %}
                                                    <option  value="{{ country.country }}" selected>{{ country.country }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="theme">Project Themes
                                            <i class="fa fa-question-circle" aria-hidden="true" title="Select project themes"></i></label>
                                        <select name="theme[]" class="form-control select2 tipso" multiple="multiple" id="theme">
                                            <option  disabled></option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="website">Project Website
                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                        <input type="text" name="website" id="website" class="form-control"
                                               value="{% if data.project.website is defined %}{{ data.project.website }}{% endif %}"
                                               title=""
                                               placeholder="">
                                    </div>

                                    <div class="form-group">
                                        <label for="region">Region
                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                        <input type="text" name="region" id="region" class="form-control"
                                               value="{% if attribute(data.projectMeta, "Region") is defined %}{{ attribute(data.projectMeta, "Region") }}{% endif %}"
                                               title=""
                                               placeholder="">
                                    </div>

                                    <div class="form-group gef-input">
                                        <label for="rep-phase">GEF Replenishment Phase
                                            <i class="fa fa-question-circle" aria-hidden="true"></i></label>
                                        <input type="text" name="rep-phase" id="rep-phase" class="form-control"
                                               value="{% if attribute(data.projectMeta, "GEF replenishment phase") is defined %}{{ attribute(data.projectMeta, "GEF replenishment phase") }}{% endif %}"
                                               title=""
                                               placeholder="">
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
                                    <div class="form-group  pull-right" id="submit-one">
                                        <a
                                                href="{{ path('admin_dashboard') }}"
                                                type="button"
                                                class="btn btn-danger cancel bold">
                                            <i
                                                    class="fa fa-times-circle fa-space-right"
                                                    aria-hidden="true"></i>
                                            Cancel
                                        </a>
                                        <button
                                                type="button"
                                                class="btn btn-success step2 bold"
                                                id="add-ecosystem">
                                            Add Ecosystem Details
                                            <i
                                                    class="fa fa-arrow-circle-right fa-space-left"
                                                    aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div><!-- /.box-body -->
                        <em>fields marked <span class="req-note"><strong>*</strong></span>
                            are mandatory fields.
                        </em>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div
                            class="panel-heading"
                            role="tab"
                            id="additional-data">
                        <h4 class="panel-title">
                            <a
                                    id="tab2"
                                    class="collapsed pdata"
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#collapseTwo"
                                    aria-expanded="false"
                                    aria-controls="collapseTwo">
                                Ecosystem Details
                            </a>
                        </h4>
                    </div>

                    <div
                            id="collapseTwo"
                            class="panel-collapse collapse"
                            role="tabpanel"
                            aria-labelledby="additional-details">
                        <div class="panel-body">
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                            <div class="box-body">
                                <div class="row padded">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                        <div id="step2-error"></div>
                                    </div>
                                </div>

                                <div class="row">
                                    {% if data.projectMeta['LME Regions'] is defined and data.projectMeta['LME Regions'] != "" %}
                                        {% set regionsProject = data.projectMeta['LME Regions'] | split(',') %}
                                    {% else %}
                                        {% set regionsProject = "" %}
                                    {% endif %}
                                    <div class="col-md-8 col-sm-8">

                                        <div class="form-group">
                                            <label
                                                    for="lme-regions">
                                                LME Regions
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Select LME Regions"></i>
                                            </label>
                                            <select
                                                    name="lme-regions[]"
                                                    class="form-control select2"
                                                    multiple="multiple"
                                                    id="lme-regions">
                                                <option disabled></option>
                                                {% for lmeRegions in data.lmeRegions %}
                                                    {% if lmeRegions.id in regionsProject %}
                                                        <option
                                                                value="{{ lmeRegions.id }}"
                                                                selected>
                                                            {{ lmeRegions.regions }}
                                                        </option>
                                                    {% else %}
                                                        <option
                                                                value="{{ lmeRegions.id }}">
                                                            {{ lmeRegions.regions }}
                                                        </option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            {% if data.projectMeta['Habitat'] is defined and data.projectMeta['Habitat'] != "" %}
                                                {% set habitatProject = data.projectMeta['Habitat'] | split(',') %}
                                            {% else %}
                                                {% set habitatProject = "" %}
                                            {% endif %}
                                            <label
                                                    for="lme-habitat">
                                                Habitat
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Select LME Habitat"></i>
                                            </label>
                                            <select
                                                    name="lme-habitat[]"
                                                    class="form-control select2"
                                                    multiple="multiple"
                                                    id="lme-habitat"
                                                    placeholder="Select LME habitat">
                                                {% for lmehabitat in data.lmehabitat %}
                                                    {% if lmehabitat.id == "label" %}
                                                        <optgroup
                                                                label="{{ lmehabitat.value }}">
                                                            {{ lmehabitat.value }}
                                                        </optgroup>
                                                    {% else %}
                                                        {% if lmehabitat.id in habitatProject  %}
                                                            <option
                                                                    value="{{ lmehabitat.id }}"
                                                                    selected>
                                                                {{ lmehabitat.value }}
                                                            </option>
                                                        {% else %}
                                                            <option
                                                                    value="{{ lmehabitat.id }}">
                                                                {{ lmehabitat.value }}
                                                            </option>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="lme-strategic-priority">
                                                Strategic Priority
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Select Stragic Priority"></i>
                                            </label>
                                            <select
                                                    name="lme-strategic-priority"
                                                    class="form-control select2"
                                                    id="lme-strategic-priority">
                                                <option value=""></option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="publications">
                                                Related Publications
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Related Publications"></i>
                                            </label>
                                            <input
                                                    name="publications"
                                                    id="publications"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Related Publications") is defined %}{{ attribute(data.projectMeta, "Related Publications") }}{% endif %}" />
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="ecosystem">
                                                Ecosystem
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Ecosystem"></i>
                                            </label>
                                            {% if data.projectMeta['Ecosystem'] is defined and data.projectMeta['Ecosystem'] != "" %}
                                                {% set ecosystemProject = data.projectMeta['Ecosystem'] | split(',') %}
                                            {% else %}
                                                {% set ecosystemProject = "" %}
                                            {% endif %}
                                            <select
                                                    name="ecosystem[]"
                                                    class="form-control select2"
                                                    id="ecosystem"
                                                    multiple>
                                                <option disabled></option>
                                                {% for lmeEcosystem in data.lmeEcosystem %}
                                                    {% if lmeEcosystem.id in ecosystemProject %}
                                                        <option
                                                                value="{{ lmeEcosystem.id }}"
                                                                selected>
                                                            {{ lmeEcosystem.ecosystem }}
                                                        </option>
                                                    {% else %}
                                                        <option
                                                                value="{{ lmeEcosystem.id }}">
                                                            {{ lmeEcosystem.ecosystem }}
                                                        </option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="indicators">
                                                Project Indicators

                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Add Project Indicator"></i>
                                            </label>
                                            <input
                                                    name="indicators"
                                                    id="indicators"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Project Indicators") is defined %}{{ attribute(data.projectMeta, "Project Indicators") }}{% endif %}" />
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="datasets">
                                                Related Datasets
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Related Datasets"></i>
                                            </label>
                                            <input
                                                    name="datasets"
                                                    id="datasets"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Related Datasets") is defined %}{{ attribute(data.projectMeta, "Related Datasets") }}{% endif %}"/>
                                        </div>

                                        <div class="form-group">
                                            <label
                                                    for="programs">
                                                Operational Programme
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="programs"
                                                    id="programs"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Operational Programme") is defined %}{{ attribute(data.projectMeta, "Operational Programme") }}{% endif %}" />
                                        </div>
                                    </div>

                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
                                        <div
                                                class="form-group pull-right"
                                                id="submit-one">
                                            <a
                                                    href="{{ path('admin_dashboard') }}"
                                                    type="button"
                                                    class="btn btn-danger cancel bold">
                                                <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                                                Cancel
                                            </a>
                                            <a
                                                    id="tab2"
                                                    class="btn btn-warning step2 bold"
                                                    data-toggle="collapse"
                                                    data-parent="#accordion"
                                                    href="#collapseOne"
                                                    aria-expanded="false"
                                                    aria-controls="collapseOne">
                                                <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                                                Back to Project Details
                                            </a>
                                            <button
                                                    type="button"
                                                    class="btn btn-success step2 bold"
                                                    id="add-project-dates">
                                                Add Project Dates
                                                <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.box-body -->
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="project-dates">
                        <h4 class="panel-title">
                            <a
                                    id="tab2"
                                    class="collapsed pdates"
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#collapseThree"
                                    aria-expanded="false"
                                    aria-controls="collapseThree">
                                Project Dates
                            </a>
                        </h4>
                    </div>

                    <div
                            id="collapseThree"
                            class="panel-collapse collapse"
                            role="tabpanel"
                            aria-labelledby="project-dates">
                        <div class="panel-body">
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                            <div class="box-body">
                                <div class="row padded">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                        <div id="step2-error"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            <label for="pms-entry">
                                                First PIMS Entry
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="pms-entry"
                                                    id="pms-entry"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Date of receipt or first PMIS entry") is defined and attribute(data.projectMeta, "Date of receipt or first PMIS entry") != "null" %}{{ attribute(data.projectMeta, "Date of receipt or first PMIS entry") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="pif-approval">
                                                PIF Approval
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="pif-approval"
                                                    id="pif-approval"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "PIF Clearance or PIF Approval Date") is defined and attribute(data.projectMeta, "PIF Clearance or PIF Approval Date") != "null" %}{{ attribute(data.projectMeta, "PIF Clearance or PIF Approval Date") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="expected-program">
                                                Expected Entry into Work Program
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="expected-program"
                                                    id="expected-program"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Expected date of entry into work program") is defined and attribute(data.projectMeta, "Expected date of entry into work program") != "null" %}{{ attribute(data.projectMeta, "Expected date of entry into work program") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="approval">
                                                Approval
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="approval"
                                                    id="approval"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Date of project approval") is defined and attribute(data.projectMeta, "Date of project approval") != "null" %}{{ attribute(data.projectMeta, "Date of project approval") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="ceo-approval">
                                                CEO Approval
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="ceo-approval"
                                                    id="ceo-approval"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Date of project approval") is defined and attribute(data.projectMeta, "Date of project approval") != "null" %}{{ attribute(data.projectMeta, "Date of project approval") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="ceo-endorsement">
                                                CEO Endorsement (FSP)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="ceo-endorsement"
                                                    id="ceo-endorsement"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Date of CEO endorsement (FSP)") is defined and attribute(data.projectMeta, "Date of CEO endorsement (FSP)") != "null" %}{{ attribute(data.projectMeta, "Date of CEO endorsement (FSP)") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            <label for="expected-grant-sign">
                                                Expected Grant Signing
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="expected-grant-sign"
                                                    id="expected-grant-sign"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Expected date of Grant signing") is defined and attribute(data.projectMeta, "Expected date of Grant signing") != "null" %}{{ attribute(data.projectMeta, "Expected date of Grant signing") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="actual-grant-sign">
                                                Actual Grant signing
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="actual-grant-sign"
                                                    id="actual-grant-sign"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Actual date of Grant signing") is defined and attribute(data.projectMeta, "Actual date of Grant signing") != "null" %}{{ attribute(data.projectMeta, "Actual date of Grant signing") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="expected-implementation-start">
                                                Expected Implementation Start
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="expected-implementation-start"
                                                    id="expected-implementation-start"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Expected date of implementation start") is defined and attribute(data.projectMeta, "Expected date of implementation start") != "null" %}{{ attribute(data.projectMeta, "Expected date of implementation start") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="actual-implementation-start">
                                                Actual Implementation Start
                                                <i class="fa fa-question-circle tipso" aria-hidden="true" title="Actual Implementation Start Date"></i>
                                            </label>
                                            <input
                                                    name="actual-implementation-start"
                                                    id="actual-implementation-start"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Actual date of implementation start") is defined and attribute(data.projectMeta, "Actual date of implementation start") != "null" %}{{ attribute(data.projectMeta, "Actual date of implementation start") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="expected-closure">
                                                Expected Closure
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="expected-closure"
                                                    id="expected-closure"
                                                    class="form-control datepicker"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Expected date of closure") is defined and attribute(data.projectMeta, "Expected date of closure") != "null" %}{{ attribute(data.projectMeta, "Expected date of closure") | date('d/m/Y') }}{% endif %}"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
                                        <div
                                                class="form-group pull-right"
                                                id="submit-one">
                                            <a
                                                    href="{{ path('admin_dashboard') }}"
                                                    type="button"
                                                    class="btn btn-danger cancel bold">
                                                <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                                                Cancel
                                            </a>
                                            <a
                                                    id="tab2"
                                                    class="btn btn-warning step2 bold"
                                                    data-toggle="collapse"
                                                    data-parent="#accordion"
                                                    href="#collapseTwo"
                                                    aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                                                Back to Ecosystem Details
                                            </a>
                                            <button
                                                    type="button"
                                                    class="btn btn-success step2 bold"
                                                    id="add-project-fundings">
                                                Add Project Fundings
                                                <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.box-body -->
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div
                            class="panel-heading"
                            role="tab"
                            id="project-funds">
                        <h4 class="panel-title">
                            <a
                                    id="tab2"
                                    class="collapsed pfunds"
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#collapseFour"
                                    aria-expanded="false"
                                    aria-controls="collapseFour">
                                Project Fundings
                            </a>
                        </h4>
                    </div>
                    <div
                            id="collapseFour"
                            class="panel-collapse collapse"
                            role="tabpanel"
                            aria-labelledby="project-funding">
                        <div class="panel-body">
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                            <div class="box-body">
                                <div class="row padded">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                        <div id="step2-error"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            <label for="approved-ppg">
                                                Approved PPG(s)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="approved-ppg"
                                                    id="approved-ppg"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "(Sum of all) Approved PPG(s)") is defined %}{{ attribute(data.projectMeta, "(Sum of all) Approved PPG(s)") }}{% endif %}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="agency-fees">
                                                Agency Fees (PPG)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="agency-fees"
                                                    id="agency-fees"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Agency fees paid separately for PPG") is defined %}{{ attribute(data.projectMeta, "Agency fees paid separately for PPG") }}{% endif %}" />
                                        </div>
                                        <div class="form-group">
                                            <label for="agency-fees-pif">
                                                Agency Fees (PIF)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="agency-fees-pif"
                                                    id="agency-fees-pif"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Agency Fee PIF stage") is defined %}{{ attribute(data.projectMeta, "Agency Fee PIF stage") }}{% endif %}" />
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-sm-6">
                                        <div class="form-group">
                                            <label for="agency-fees-pdf">
                                                Agency Fees (PDF-B)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="agency-fees-pdf"
                                                    id="agency-fees-pdf"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Agency fees paid separately for PDF-B") is defined %}{{ attribute(data.projectMeta, "Agency fees paid separately for PDF-B") }}{% endif %}" />
                                        </div>
                                        <div class="form-group">
                                            <label for="gef-project-grant">
                                                GEF Project Grant (PIF)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="gef-project-grant"
                                                    id="gef-project-grant"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "GEF Project Grant PIF stage") is defined %}{{ attribute(data.projectMeta, "GEF Project Grant PIF stage") }}{% endif %}" />
                                        </div>
                                        <div class="form-group">
                                            <label for="co-finance">
                                                Co-finance (PIF)
                                                <i class="fa fa-question-circle tipso" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    name="co-finance"
                                                    id="co-finance"
                                                    class="form-control"
                                                    placeholder=""
                                                    value="{% if attribute(data.projectMeta, "Cofinance PIF stage") is defined %}{{ attribute(data.projectMeta, "Cofinance PIF stage") }}{% endif %}" />
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pull-right">
                                        <div
                                                class="form-group
                                                pull-right"
                                                id="submit-one">
                                            <a
                                                    href="{{ path('admin_dashboard') }}"
                                                    type="button"
                                                    class="btn btn-danger cancel bold">
                                                <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                                                Cancel
                                            </a>
                                            <a
                                                    id="tab2"
                                                    class="btn btn-warning step2 bold"
                                                    data-toggle="collapse"
                                                    data-parent="#accordion"
                                                    href="#collapseThree"
                                                    aria-expanded="false"
                                                    aria-controls="collapseThree">
                                                <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                                                Back to Project Dates
                                            </a>
                                            <button
                                                    type="button"
                                                    class="btn btn-success step2 bold"
                                                    id="finalise-project">
                                                Finalise
                                                <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.box-body -->
                            <em>fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.</em>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div
                            class="panel-heading"
                            role="tab"
                            id="project-finalise">
                        <h4 class="panel-title">
                            <a
                                    id="tab2"
                                    class="collapsed finalise"
                                    role="button"
                                    data-toggle="collapse"
                                    data-parent="#accordion"
                                    href="#finalise"
                                    aria-expanded="false"
                                    aria-controls="finalise">
                                Finalise & Save
                            </a>
                        </h4>
                    </div>
                    <div
                            id="finalise"
                            class="panel-collapse collapse"
                            role="tabpanel"
                            aria-labelledby="project-save">
                        <div class="panel-body">
                            <div class="box-body">
                                <div class="row">
                                    <div class=" col-md-8 col-lg-8 ">
                                        <table class="table table-user-information">
                                            <tbody>
                                            <tr>
                                                <td colspan="2" class="no-border">
                                                    <strong>Project Details</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="dl">GEF ID</td>
                                                <td class="dd" id="data-idGef"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Other ID</td>
                                                <td class="dd" id="data-idOther"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Title</td>
                                                <td class="dd" id="data-title"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Description</td>
                                                <td class="dd" id="data-description"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Implementing Agency</td>
                                                <td class="dd" id="data-implementing-agency"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Implementing Agency (Other)</td>
                                                <td class="dd" id="data-implementing-agency-other"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Executing Agency</td>
                                                <td class="dd" id="data-executing-agency"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Funding / Donor Agency</td>
                                                <td class="dd" id="data-donor-agency"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Status</td>
                                                <td class="dd" id="data-projectStatus"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Focal Area</td>
                                                <td class="dd" id="data-focal-area"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Type Acronym</td>
                                                <td class="dd" id="data-acronym"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Participating Countries</td>
                                                <td class="dd" id="data-countries"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Themes</td>
                                                <td class="dd" id="data-theme"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Website</td>
                                                <td class="dd" id="data-website"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Region</td>
                                                <td class="dd" id="data-region"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">GEF Replenishment Phase</td>
                                                <td class="dd" id="data-rep-phase"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">LME Regions</td>
                                                <td class="dd" id="data-lme-regions"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Habitat</td>
                                                <td class="dd" id="data-lme-habitat"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Strategic Priority</td>
                                                <td class="dd" id="data-lme-strategic-priority"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">IP Rating</td>
                                                <td class="dd" id="data-ip-rating"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Related Publications</td>
                                                <td class="dd" id="data-publications"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Ecosystem</td>
                                                <td class="dd" id="data-ecosystem"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Project Indicators</td>
                                                <td class="dd" id="data-indicators"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Related Datasets</td>
                                                <td class="dd" id="data-datasets"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Operational Programme</td>
                                                <td class="dd" id="data-programs"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Do Rating</td>
                                                <td class="dd" id="data-do-rating"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">First PIMS Entry</td>
                                                <td class="dd" id="data-pms-entry"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">PIF Approval</td>
                                                <td class="dd" id="data-pif-approval"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Expected Entry into Work Program</td>
                                                <td class="dd" id="data-expected-program"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Approval</td>
                                                <td class="dd" id="data-approval"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">CEO Approval</td>
                                                <td class="dd" id="data-ceo-approval"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">CEO Endorsement (FSP) </td>
                                                <td class="dd" id="data-ceo-endorsement"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Expected Grant Signing</td>
                                                <td class="dd" id="data-expected-grant-sign"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Actual Grant signing</td>
                                                <td class="dd" id="data-actual-grant-sign"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Expected Implementation Start</td>
                                                <td class="dd" id="data-expected-implementation-start"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Actual Implementation Start</td>
                                                <td class="dd" id="data-actual-implementation-start"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Expected Closure</td>
                                                <td class="dd" id="data-expected-closure"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Approved PPG(s) </td>
                                                <td class="dd" id="data-approved-ppg"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Agency Fees (PPG)</td>
                                                <td class="dd" id="data-agency-fees"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Agency Fees (PIF)</td>
                                                <td class="dd" id="data-agency-fees-pif"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">Agency Fees (PDF-B)</td>
                                                <td class="dd" id="data-agency-fees-pdf"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">GEF Project Grant (PIF)</td>
                                                <td class="dd" id="data-gef-project-grant"></td>
                                            </tr>
                                            <tr>
                                                <td class="dl">GCo-finance (PIF)</td>
                                                <td class="dd" id="data-co-finance"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row-inline pull-right">
                                    <div
                                            class="form-group"
                                            id="submit-two">
                                        <a
                                                href="{{ path('admin_dashboard') }}"
                                                type="button"
                                                class="btn btn-danger cancel bold">
                                            <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                                            Cancel
                                        </a>
                                        <a
                                                id="tab2"
                                                class="btn btn-warning step2 bold"
                                                data-toggle="collapse"
                                                data-parent="#accordion"
                                                href="#collapseFour"
                                                aria-expanded="false"
                                                aria-controls="collapseFour">
                                            <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                                            Back to Project Fundings
                                        </a>
                                        <button
                                                type="submit"
                                                class="btn btn-success step4 bold"
                                                id="submit">
                                            <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                            Save Project
                                        </button>
                                    </div>
                                </div>
                            </div><!-- /.box-body -->
                        </div>
                    </div>
                </div>
            </form>
            {% endblock %}
        </div>

        <div class="modal fade  modal-wide" id="modal-inst">
            <div class="modal-dialog modal-lg col-md-6 col-lg-6 ">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title">
                            Add Institution
                        </h4>
                    </div>
                    <div class="modal-body">
                        <span class="inst-error"></span>
                        <form
                                action="#"
                                method="POST"
                                role="form"
                                id="addInst">
                            <div class="form-group">
                                <label
                                        for="icountry"
                                        class="tipso"
                                        title="Select Country">
                                    Select Institution Country
                                    <span class="req"> * </span>
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <select
                                        class="form-control select2"
                                        style="width: 100%;"
                                        name="country"
                                        id="country"
                                        data-placeholder="e.g. Belgium">
                                    {% for country in data.countries %}
                                        <option
                                                value="{{ country.idCountry }}">
                                            {{ country.country }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div><!-- /.form-group -->

                            <div class="form-group">
                                <label
                                        for="state"
                                        class="tipso"
                                        title="Enter the complete official name of the Institution in an official language of the institution. Use English if English is the main working language of the institution. <br />e.g. Vlaams Instituut Voor De Zee">
                                    Name
                                    <span class="req">*</span>
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <input
                                        type="text"
                                        name="instName"
                                        id="instName"
                                        class="form-control"
                                        value=""
                                        title=""
                                        placeholder="e.g. Vlaams Instituut Voor De Zee" />
                            </div>
                            <div class="form-group">
                                <label
                                        for="instNameEng"
                                        class="tipso"
                                        title="Enter the complete name of the Institution in English. You can skip this if you have already entered the institution name in English above.<br />e.g. Flanders Marine Institute">
                                    Name in English
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <input
                                        type="text"
                                        name="instNameEng"
                                        id="instNameEng"
                                        class="form-control"  value=""
                                        title=""
                                        placeholder="e.g. Flanders Marine Institute" />
                            </div>
                            <div class="form-group">
                                <label
                                        for="iacronym"
                                        class="tipso"
                                        title="Enter the official Acronym of the institute in upper case.<br />e.g. VLIZ">
                                    Acronym
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <input
                                        type="text"
                                        name="iacronym"
                                        id="iacronym"
                                        class="form-control capitalize"
                                        value=""
                                        title=""
                                        placeholder="Institution acronym" />
                            </div>
                            <div class="row">
                                <div class="form-group col-md-3">
                                    <label
                                            for="instLogo"
                                            class="tipso"
                                            title="Add the institute logo">
                                        Institute Logo
                                    </label>
                                    <input
                                            type="file"
                                            accept="image/*"
                                            name="instLogo"
                                            id="instLogo"
                                            class="form-control"
                                            value=""
                                            title=""
                                            placeholder="Upload Logo" />
                                </div>
                                <div class="form-group col-md-3">
                                    <img
                                            id="instlogo-preview"
                                            src="#"
                                            style="display: none;"
                                            alt="uploaded image"
                                            class="img-thumbnail" />
                                    <div class="col-md-12 text-center">
                                        <button
                                                class="btn btn-danger btn-sm"
                                                id="instremove"
                                                type="button"
                                                style="display: none;">
                                            Remove
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- TODO PARENT INSTITUTE HERE -->
                            <div class="form-group">
                                <label for="institute" class="tipso"
                                       title="Select the type of your institution from the given list.<br />e.g. Government">Type<span
                                            class="req">*</span> <i
                                            class="fa fa-question-circle"
                                            aria-hidden="true"></i></label>
                                <select class="form-control select2"
                                        style="width: 100%;"
                                        id="instType" name="instType"
                                        data-toggle="tooltip" title="">
                                    <option disabled="" selected="">
                                        Type
                                    </option>
                                    <option label="Academic" value="1">
                                        Academic
                                    </option>
                                    <option label="Government"
                                            value="3">Government
                                    </option>
                                    <option label="International / Intergovernmental"
                                            value="7">International /
                                        Intergovernmental
                                    </option>
                                    <option label="NGO" value="4">NGO
                                    </option>
                                    <option label="Private commercial"
                                            value="6">Private commercial
                                    </option>
                                    <option label="Private non-profit"
                                            value="5">Private non-profit
                                    </option>
                                    <option label="Research" value="2">
                                        Research
                                    </option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="iaddress" class="tipso"
                                       title="Enter  Street Name + No., P.O. Box, Company Name, C/O <br />e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">Address
                                    Line 1<span class="req">*</span> <i
                                            class="fa fa-question-circle"
                                            aria-hidden="true"></i></label>
                                <input type="text" name="iaddress"
                                       id="iaddress"
                                       class="form-control" value=""
                                       title=""
                                       placeholder="Street address, P.O. box, company name, c/o">
                            </div>
                            <div class="form-group">
                                <label for="iaddressline2" class="tipso"
                                       title="Enter  Building,  Floor or Office number<br />e.g.  No.7/61 or Building No. 12 or 2nd Floor etc.">Address
                                    Line 2 <i
                                            class="fa fa-question-circle"
                                            aria-hidden="true"></i></label>
                                <input type="text" name="iaddressline2"
                                       id="iaddressline2"
                                       class="form-control" value=""
                                       title=""
                                       placeholder="Apartment, suite, unit, building, floor, etc">
                            </div>

                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label for="ipostcode" class="tipso"
                                           title="Enter the Postal Area code for the Locality<br />e.g. 8400">Postal/
                                        Zip Code<span
                                                class="req">*</span> <i
                                                class="fa fa-question-circle"
                                                aria-hidden="true"></i></label>
                                    <input type="text" name="ipostcode"
                                           id="ipostcode"
                                           class="form-control" value=""
                                           title=""
                                           placeholder="ZIP/Postal Code">
                                </div>
                                <div class="form-group col-md-8">
                                    <label for="icity" class="tipso"
                                           title="Enter Name of Your City<br />e.g. Oostende">City<span
                                                class="req">*</span> <i
                                                class="fa fa-question-circle"
                                                aria-hidden="true"></i></label>
                                    <input type="text" name="icity"
                                           id="icity"
                                           class="form-control" value=""
                                           title="" placeholder="City">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="istate" class="tipso"
                                       title="Enter State/Province/Region<br />e.g. West Vlaanderen">State/Province/Region
                                    <i class="fa fa-question-circle"
                                       aria-hidden="true"></i></label>
                                <input type="text" name="istate"
                                       id="istate" class="form-control"
                                       value="" title=""
                                       placeholder="State/Province/Region">
                            </div>
                            <div class="form-group">
                                <label for="icontact" class="tipso"
                                       title="Enter official phone number of your institution. Start with your country code and/or area code<br/>e.g. +32 4563481122">Phone
                                    Telephone <i
                                            class="fa fa-question-circle"
                                            aria-hidden="true"></i></label>
                                <input type="text" name="icontact"
                                       id="icontact"
                                       class="form-control" value=""
                                       title=""
                                       placeholder="Contact Telephone">
                            </div>
                            <div class="form-group">
                                <label for="ifax" class="tipso"
                                       title="Enter official fax number of your institution. Start with your country code and/or area code">Fax</label>
                                <input type="text" name="ifax" id="ifax"
                                       class="form-control" value=""
                                       title=""
                                       placeholder="Institution Fax">
                            </div>
                            <div class="form-group">
                                <label for="iemail" class="tipso"
                                       title="Enter the official contact email for your institution.<br />e.g. info@yourinstitution.org">Email
                                    <i class="fa fa-question-circle"
                                       aria-hidden="true"></i></label>
                                <input type="text" name="iemail"
                                       id="iemail" class="form-control"
                                       value="" title=""
                                       placeholder="Institution Email">
                            </div>
                            <div class="form-group">
                                <label for="iwebsite" class="tipso"
                                       title="Enter the URL of the official web portal of your website.<br />e.g. http://www.iode.org">Website
                                    <i class="fa fa-question-circle"
                                       aria-hidden="true"></i></label>
                                <input type="text" name="iwebsite"
                                       id="iwebsite"
                                       class="form-control" value=""
                                       title=""
                                       placeholder="Institution Website eg. http://www.example.com">
                            </div>
                            <div class="form-group">
                                <label for="iedmo" class="tipso"
                                       title="Enter (if present )the SeaDataNet EDMO code for your institution.">EDMO
                                    Code
                                    <i class="fa fa-question-circle"
                                       aria-hidden="true"></i></label>
                                <small class="pull-right"><a
                                            href="javascript:void(0);"
                                            class="tooltips"
                                            title="European Directory of Marine Organizations (<a href='http://www.seadatanet.org/' target='_blank'>EDMO</a>) is a database of information about major European institutions involved in oceanic and marine research or related activities">What's
                                        This</a></small>
                                <input type="text" name="iedmo"
                                       id="iedmo" class="form-control"
                                       value="" title=""
                                       placeholder="EDMO Record ID"
                                       pattern="\d*">
                            </div>
                            <div class="form-group">
                                <label
                                        for="studyregion"
                                        class="tipso"
                                        title="Select one or more Global Sea Regions to describe the regions of your institution study.<br />e.g. Pacific Small Islands">Sea
                                    regions of study
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <select class="form-control select2 noSearch"
                                        style="width: 100%;"
                                        id="studyregion"
                                        name="studyregion[]"
                                        data-placeholder="e.g. Pacific Small Islands"
                                        multiple="multiple">
                                </select>
                            </div>
                            <div class="form-group">
                                <label
                                        for="iactivity"
                                        class="tipso"
                                        title="Briefly enter major activities performed at your institution">
                                    Activities
                                    <i class="fa fa-question-circle" aria-hidden="true"></i>
                                </label>
                                <textarea name="iactivity"
                                          id="iactivity"
                                          class="form-control textarea"
                                          rows="3"
                                          placeholder="Activities">
                                </textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button
                                type="button"
                                class="btn btn-danger bold"
                                data-dismiss="modal">
                            <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                            Close
                        </button>
                        <button
                                type="button"
                                class="btn btn-success bold"
                                id="addInstitution">
                            Add Institution
                            <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    {% include "footer.html.twig" %}

    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{asset('js/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/validator.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.inputmask.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/bootstrap-typeahead.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery-ui.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.noty.packaged.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/project.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/project.data.preview.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/zebra_tooltips.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tinymce.min.js') }}" type="text/javascript"></script>
    <script>
    var addInstitutionUrl = "{{ path('add_institution') }}";
    var searchInstituteUrl = "{{ path('get_institution_ajax') }}";
    var searchExpertUrl = "{{ path('get_expert_ajax') }}";
    tinymce.init({
        selector: 'textarea',
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste imagetools powerpaste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        powerpaste_allow_local_images: true,
        powerpaste_word_import: 'prompt',
        powerpaste_html_import: 'prompt',
        branding: false,
        relative_urls: false,
        convert_urls: false,
        forced_root_block : false,
        setup: function (editor) {
            editor.on('init', function (e) {
                var ed = tinymce.activeEditor;
                var ifr = tinymce.DOM.get(ed.id + '_ifr');
                ed.dom.setAttrib(ifr, 'title', '');
            });
        }
    });

    </script>
    <script src="{{ asset('js/project.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/project.data.preview.js') }}" type="text/javascript"></script>
{% endblock %}