{#
edit the expert information
is used in ProfileController
    js in registration.js
#}
<div class="panel-heading" role="tab" id="add-details">
    <h4 class="panel-title">
        <a
                id="tab2"
                role="button"
                data-toggle="collapse"
                data-parent="#accordion"
                href="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne">
            Select your Affiliation and Address
            {% if app.user.id is defined %}
                <small class="fa-space-left bold">
                    ( edit <i class="fa fa-pencil fa-fw" aria-hidden="true"></i> )
                </small>
            {% endif %}
        </a>
    </h4>
</div>
{% if is_granted('IS_AUTHENTICATED_FULLY') %}
    <div id="authenticated" class="authenticated" role="authenticated"></div>
{% else %}
    <div id="authenticated" class="authenticated" role=""></div>
{% endif %}
<div
        id="collapseOne"
        class="panel-collapse collapse"
        role="tabpanel"
        aria-labelledby="add-details">
    <div class="panel-body">
        <em>
            fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.
        </em>

        <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="box-body">
            <div class="row">
                <div class="form-group">
                    <h2>
                        Affiliation
                    </h2>
                    <label
                            class="col-tn-12 col-xs-12 col-sm-7 col-md-6 col-lg-5 control-label tipso"
                            for="radios"
                            title='Click on "Yes" if you work for an Organization/Institute/Company, otherwise click "No".'>
                        Are you linked to an Organization/Institute/Company? <span class="req">*</span>
                        <i class="fa fa-question-circle" aria-hidden="true"></i>
                    </label>
                    <div class="col-sm-4 col-xs-6 col-md-4 col-lg-4 col-tn-12">
                        <label
                                class="radio-inline"
                                for="institutional">
                            <input
                                    type="radio"
                                    name="reg-type"
                                    id="institutional"
                                    class="reg-type"
                                    value="1"
                                {% if expert.0.regType is not same as(2) %}
                                    checked="checked"
                                {% endif %}/>
                            Yes
                        </label>
                        <label
                                class="radio-inline"
                                for="individual">
                            <input
                                    type="radio"
                                    name="reg-type"
                                    id="individual"
                                    class="reg-type"
                                    value="2"
                                {% if expert.0.regType is not same as(1) %}
                                    checked="checked"
                                {% endif %}/>
                            No
                        </label>
                    </div>
                </div>
            </div>

            {% if expert.0.regType == 1
                and expert.2 %}
                <!-- institute -->
                {% set instIdCountry = expert.2.countryCode %}
            {% else %}
                <!-- individual -->
                {% set instIdCountry = '' %}
            {% endif %}
            <div class="row" id="institute-tab">
                <div class="col-md-8 col-sm-8">
                    <div class="form-group">
                        <h3>
                            Institute
                        </h3>
                        <label
                                for="instCountry"
                                class="tipso"
                                title="Select the country where your institute is based<br />e.g. Belgium">
                            Country <span class="req">*</span>
                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                        </label>

                        <select
                                class="form-control select2"
                                style="width: 100%;"
                                id="instCountry"
                                name="instCountry"
                                data-toggle="tooltip"
                                title="!" >
                            <option
                                    disabled="disabled"
                                    selected="selected">
                                choose a country
                            </option>
                            {% for instCountry in countries %}
                                <option
                                        value="{{ instCountry.idCountry }}"
                                        countryCode="{{ instCountry.countryCode }}"
                                    {% if instCountry.idCountry == instIdCountry %}
                                        selected="selected"
                                    {% endif %}>
                                    {{ instCountry.country }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <label
                                for="institute"
                                class="tipso"
                                title="Select your Organization/Institute/Company.<br />
                                {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                                    If you cannot find your institute in the list,
                                    click on <strong>Cannot find my institute- Create New</strong> option
                                    to enter details of your institute.<br />
                                    e.g. National Oceanic and Atmospheric Administration
                                {% endif %}">
                            Organization/Institute/Company <span class="req">*</span>
                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                        </label>
                        <select
                                class="form-control select2"
                                style="width: 100%;"
                                id="institute"
                                name="institute"
                                data-toggle="tooltip"
                                title="">
                            {% if instIdCountry == '' %}
                            <option
                                    disabled=""
                                    selected="">
                                Select a country first
                            </option>
                            {% else %}
                                <option
                                        value="create_new"
                                        style="background-color:red;'">
                                    Cannot find expert's Institution - Create New
                                </option>
                            {% endif %}>
                        </select>
                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                            <div
                                    class="create-note text-danger">
                                If you cannot find your institute in the list,
                                click on <strong>"Cannot find my institute- Create New"</strong> option in the above dropdown to create New Institute.
                            </div>
                        {% else %}
                            <div
                                    class="create-note text-danger">
                                The moment you confirmed you subscription by clicking on the link in the mail you have received,
                                you will be able to add your institute if it is not yet in the list.
                                To do so edit your profile after logging in
                                and choose <strong>"Cannot find my institute- Create New"</strong> option in the above dropdown.
                            </div>
                        {% endif %}
                    </div>

                    <div class="form-group">
                        <label
                                for="department"
                                class="tipso"
                                title="Enter your Department.<br/>e.g. National Ocean Service">
                            Department
                            <i class="fa fa-question-circle" aria-hidden="true"></i>
                        </label>
                        <input
                                id="department"
                                placeholder="choose your department"
                                type="text"
                                autocomplete="off"
                                class="form-control"
                                name="department"
                                value="{% if expert.0.dept is defined %}{{ expert.0.dept }}{% endif %}" />
                    </div>

                    <!-- MODAL to add a new institute -->
                    <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">Create a new organization/institute/company</h4>
                                </div>
                                <div class="modal-body">
                                    <span class="inst-error" id="inst-error"></span>
                                    <form
                                            action="#"
                                            method="POST"
                                            role="form"
                                            id="addInst">

                                        <div class="form-group">
                                            <label
                                                    for="instName"
                                                    class="tipso"
                                                    title="Enter the complete official name of the Institute in an official language of the institute.
                                                        Use English if English is the main working language of the institute. <br />
                                                        e.g. Vlaams Instituut Voor De Zee">
                                                Name (official language)<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 Institute in English.
                                                                                    <br />e.g. Flanders Marine Institute">
                                                Name (in English)<span class="req">*</span>
                                                <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"
                                                    value="" title=""
                                                    placeholder="Institute 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="logo-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="remove"
                                                            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 institute 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="disabled"
                                                        selected="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="icountry"
                                                    class="tipso"
                                                    title="This field cannot be changed and is identical to the selection made by you previously.">
                                                Institute Country <span class="req">*</span>
                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    type="text"
                                                    name="icountry"
                                                    id="icountry"
                                                    class="form-control"
                                                    value=""
                                                    title="Institute country"
                                                    readonly="" />
                                            <input
                                                    type="hidden"
                                                    name="icountrycode"
                                                    id="icountrycode"
                                                    value=""
                                                     />
                                        </div><!-- /.form-group -->

                                        <div class="form-group">
                                            <label
                                                    for="icontact"
                                                    class="tipso"
                                                    title="Enter the official phone number of your institute.
                                                        Start with the country code and/or area code<br/>
                                                        e.g. +32 4563481122">
                                                Phone Number
                                                <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="iemail"
                                                    class="tipso"
                                                    title="Enter the official contact email for your institute.<br />
                                                                                    e.g. info@yourinstitute.org">
                                                Email Address <span class="req">*</span>
                                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                            </label>
                                            <input
                                                    type="text"
                                                    name="iemail"
                                                    id="iemail"
                                                    class="form-control"
                                                    value=""
                                                    title=""
                                                    placeholder="Institute Email Address" >
                                        </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=""
                                                    onclick="this.value = 'https://';"
                                                    placeholder="Institute 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 institute.">
                                                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 institutes 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 institute 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="select sea region(s)"
                                                    multiple="multiple">
                                                {% for seaRegion in availableSeaRegions %}
                                                    <option label="{{ seaRegion.id }}"
                                                            value="{{ seaRegion.id }}">{{ seaRegion.name }}</option>
                                                {% endfor %}

                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="iactivity" class="tipso"
                                                   title="Briefly enter major activities performed at your institute">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>
                                        <input
                                                type="hidden"
                                                name="ifax"
                                                id="ifax"
                                                value=""
                                                class="form-control" />

                                    </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">
                                        <!-- @todo change it to this #455 : id="addInstitute"> -->
                                        Confirm
                                        <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END MODAL to add new institute -->
                </div>
            </div>
            <!-- end institution -->

            <!-- address -->
            {# address info depends on settings #}
            {% if expert.0.useInstAddr == 1 %}
                {# use the address info from the institute #}
                {% if expert.2.instAddress is defined
                    and expert.2.instAddress is not null
                    and expert.2.instAddress != ''
                %}
                    {% set route = expert.2.instAddress %}
                {% else %}
                    {% set route = '-' %}
                {% endif %}
                {% if expert.2.addr2 is defined
                    and expert.2.addr2 is not null
                    and expert.2.addr2 != ''
                %}
                    {% set addrline2 = expert.2.addr2 %}
                {% else %}
                    {% set addrline2 = '-' %}
                {% endif %}
                {% if expert.2.postcode is defined
                    and expert.2.postcode is not null
                    and expert.2.postcode != ''
                %}
                    {% set postalCode = expert.2.postcode %}
                {% else %}
                    {% set postalCode = '-' %}
                {% endif %}
                {% if expert.2.city is defined
                    and expert.2.city is not null
                    and expert.2.city != ''
                %}
                    {% set locality = expert.2.city %}
                {% else %}
                    {% set locality = '-' %}
                {% endif %}
                {% if expert.2.state is defined
                    and expert.2.state is not null
                    and expert.2.state != ''
                %}
                    {% set administrativeArea = expert.2.state %}
                {% else %}
                    {% set administrativeArea = '-' %}
                {% endif %}
                {% if expert.2.countryCode is defined
                    and expert.2.countryCode is not null
                    and expert.2.countryCode != ''
                %}
                    {% set countryCode = expert.2.countryCode %}
                {% else %}
                    {% set countryCode = '21' %}
                {% endif %}
            {% else %}
                {# use the info from the expert #}
                {% set route = expert.0.addr1 %}
                {% set addrline2 = expert.0.addr2 %}
                {% set postalCode = expert.0.postcode %}
                {% set locality = expert.0.city %}
                {% set administrativeArea = expert.0.state %}
                {% set countryCode = expert.0.countryCode %}
            {% endif %}
            <div class="row spacing" id="address-tab">
                <div class="col-md-8 col-sm-8">
                    <div class="form-group">
                        <h3>
                            Work Location
                        </h3>
                        <!-- div class="form-group" id="individual-tab-inst-address" -->
                        <div class="form-group" id="individual-tab-inst-address">
                            <input
                                    type="checkbox"
                                    name="useinstaddress"
                                    value="1"
                                    id="useinstaddress" />&nbsp;
                            <label
                                    for="useinstaddress"
                                    class="tipso"
                                    title="Use the address of your institute/company/organization.">
                                Use Institute Address <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                        </div><!-- /.form-group -->
                        <div class="form-group">
                            <label
                                    for="route"
                                    class="tipso"
                                    title="Enter Your 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="route"
                                    id="route"
                                    class="form-control"
                                    value="{{ route }}"
                                    title=""
                                    placeholder="e.g. Jacobsenstraat or P.O. Box 123 or OceanTech etc.">
                        </div>
                        <div class="form-group">
                            <label
                                    for="addrline2"
                                    class="tipso"
                                    title="Enter Your 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="addrline2"
                                    id="addrline2"
                                    class="form-control"
                                    value="{{ addrline2 }}"
                                    title=""
                                    placeholder="e.g.  No.7/61 or Building No. 12 or 2nd Floor etc." />
                        </div>
                        <div class="form-group col-md-4">
                            <label
                                    for="postal_code"
                                    class="tipso"
                                    title="Enter the Postal Area code for Your Locality<br />e.g. 8400">
                                Postal/Zip Code<i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <input
                                    type="text"
                                    name="postal_code"
                                    id="postal_code"
                                    class="form-control"
                                    value="{{ postalCode }}"
                                    title=""
                                    placeholder="e.g. 8400" />
                        </div>
                        <div class="form-group col-md-8">
                            <label
                                    for="locality"
                                    class="tipso"
                                    title="Enter the 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="locality"
                                    id="locality"
                                    class="form-control"
                                    value="{{ locality }}"
                                    title=""
                                    placeholder="e.g. Oostende" />
                        </div>
                        <div class="form-group">
                            <label for="administrative_area_level_1" class="tipso"
                                   title="Enter Your 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="administrative_area_level_1"
                                   id="administrative_area_level_1" class="form-control"
                                   value="{{ administrativeArea }}"
                                   title="" placeholder="e.g. West Vlaanderen">
                        </div>
                        <div class="form-group">
                            <label
                                    for="country"
                                    class="tipso"
                                    title="Select the country where you are working<br />e.g. Belgium">
                                Country <span class="req">*</span>
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                            </label>
                            <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    id="country"
                                    name="country"
                                    data-toggle="tooltip"
                                    title="!" >
                                <option
                                        disabled="disabled"
                                        selected="selected">
                                    choose a country
                                </option>
                                {% for country in countries %}
                                    <option
                                            value="{{ country.idCountry }}"
                                            countryCode="{{ country.countryCode }}"
                                        {% if expert.0.countryCode is defined and country.idCountry == expert.0.countryCode %}
                                            selected="selected"
                                        {% endif %}>
                                        {{ country.country }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div><!-- /.row -->
                <div
                        class="form-group pull-right"
                        id="submit-one">
                    <!--
                    {% if app.user.username is defined %}
                        <a
                                href="{{ path('view_profile', {'user': expert.userId}) }}"
                                type="button"
                                class="btn btn-danger cancel bold">
                            <i class="fa fa-times-circle fa-space-right" aria-hidden="true"></i>
                            Cancel
                        </a>
                    {% endif %}
                    <button
                            type="button"
                            class="btn btn-success step2 bold"
                            id="next-to-two">
                        {% if expert is defined %}Add Personal Details{% else %}Add me to this Institute{% endif %}
                        <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                    </button>
                    -->
                    <button
                            type="button"
                            class="btn btn-warning step2 bold"
                            id="go-to-tab1">
                        <i class="fa fa-arrow-circle-left fa-space-right" aria-hidden="true"></i>
                        Back to Personal Details
                    </button>
                    <button
                            type="button"
                            class="btn btn-success step2 bold"
                            id="step2validate">
                        Add Professional Details
                        <i class="fa fa-arrow-circle-right fa-space-left" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            <!-- end address -->
        </div>
        <em>
            fields marked <span class="req-note"><strong>*</strong></span> are mandatory fields.
        </em>
    </div>
</div>