<div class="form-section">
    <h2>Author(s) and Organization(s)</h2>
    <div id="author-and-organization-container">
        {% if data %}
        {% for author in data.persons %}
        <div class="author form-row align-items-center mb-2">
            <div class="col-lg">
                <input type="text" class="form-control" name="person.firstName[]"
                       value="{{ author.firstName }}" placeholder="First name">
            </div>
            <div class="col-lg">
                <input type="text" class="form-control" name="person.lastName[]" value="{{ author.lastName }}" placeholder="Last name">
            </div>
            <div class="col-lg">
                <input type="url" class="form-control" name="person.orcidId[]"
                       value="{{ author.orcidId }}" placeholder="ORCID ID">
            </div>
            <div class="col-lg">
                <input type="email" class="form-control" name="person.mbox[]" value="{{ author.mbox }}" placeholder="Email">
            </div>
            <div class="col-lg">
                <select class="form-control" name="person.hadRole[]">
                    <option value="">Select role</option>
                    <option value="Contact Person" {% if author.hadRole=='ContactPerson' %}selected{% endif %}>
                        Contact Person
                    </option>
                    <option value="DataCollector" {% if author.hadRole==
                    'DataCollector' %}selected{% endif %}>Data Collector</option>
                    <option value=DataCurator {% if author.hadRole==
                    'DataCurator' %}selected{% endif %}>Data Curator</option>
                    <option value=DataManager {% if author.hadRole==
                    'DataManager' %}selected{% endif %}>Data Manager</option>
                    <option value=Distributor {% if author.hadRole==
                    'Distributor' %}selected{% endif %}>Distributor</option>
                    <option value=Editor {% if author.hadRole==
                    'Editor' %}selected{% endif %}>Editor</option>
                    <option value=Other {% if author.hadRole==
                    'Other' %}selected{% endif %}>Other</option>
                    <option value=Producer {% if author.hadRole==
                    'Producer' %}selected{% endif %}>Producer</option>
                    <option value=ProjectLeader {% if author.hadRole==
                    'ProjectLeader' %}selected{% endif %}>Project Leader</option>
                    <option value=ProjectManager {% if author.hadRole==
                    'ProjectManager' %}selected{% endif %}>Project Manager</option>
                    <option value=ProjectMember {% if author.hadRole==
                    'ProjectMember' %}selected{% endif %}>Project Member</option>
                    <option value=RelatedPerson {% if author.hadRole==
                    'RelatedPerson' %}selected{% endif %}>Related Person</option>
                    <option value=Researcher {% if author.hadRole==
                    'Researcher' %}selected{% endif %}>Researcher</option>
                    <option value=RightsHolder {% if author.hadRole==
                    'RightsHolder' %}selected{% endif %}>Rights Holder</option>
                    <option value=Sponsor {% if author.hadRole==
                    'Sponsor' %}selected{% endif %}>Sponsor</option>
                    <option value=Supervisor {% if author.hadRole==
                    'Supervisor' %}selected{% endif %}>Supervisor</option>
                    <option value="WorkPackageLeader" {% if author.hadRole==
                    'WorkPackageLeader' %}selected{% endif %}>Workpackage Leader</option>
                </select>
            </div>

            <div class="col-lg-1 text-right mt-2">
                <button type="button" class="btn btn-danger" onclick="deleteAuthor(this)">
                    <i class="material-icons mr-1 icon-align">delete_forever</i>
                </button>
            </div>
        </div>
        {% endfor %}
        {% for organization in data.organizations %}
        <div class="organization form-row align-items-center mb-2">
            <div class="col-lg">
                <label>Name:</label>
                <input type="text" class="form-control" name="organization.name[]"
                       value="{{ organization.name if organization.name else '' }}">
            </div>
            <div class="col-lg">
                <label>URL:</label>
                <input type="url" class="form-control" name="organization.url[]"
                       value="{{ organization.url if organization.url else '' }}">
            </div>
            <div class="col-lg">
                <label>ROR ID:</label>
                <input type="text" class="form-control" name="organization.hasRorId[]"
                       placeholder="e.g. https://ror.org/63z3oa416"
                       value="{{ organization.hasRorId if organization.hasRorId else '' }}">
            </div>
            <div class="col-lg">
                <label>Role:</label>
                {% if organization.hadRole %}
                <select class="form-control" name="organization.hadRole[]">
                    <option value="">Select role</option>
                    <option value="HostingInstitution" {% if organization.hadRole==
                    'HostingInstitution' %}selected{% endif %}>Hosting Institution</option>
                    <option value="RegistrationAgency" {% if organization.hadRole==
                    'RegistrationAgency' %}selected{% endif %}>Registration Agency</option>
                    <option value=RegistrationAuthority {% if organization.hadRole==
                    'RegistrationAuthority' %}selected{% endif %}>RegistrationAuthority</option>
                    <option value="ResearchGroup" {% if organization.hadRole==
                    'ResearchGroup' %}selected{% endif %}>Research Group</option>
                </select>
                {% else %}
                <select class="form-control" name="organization.hadRole[]">
                    <option value="" selected>Select a role</option>
                    <option value="HostingInstitution">Hosting Institution</option>
                    <option value="RegistrationAgency">Data Collector</option>
                    <option value="RegistrationAuthority">Registration Authority</option>
                    <option value="ResearchGroup">Research Group</option>
                </select>
                {% endif %}
            </div>
            <div class="col-lg">
                <label>Email:</label>
                <input type="email" class="form-control" name="organization.mbox[]"
                       value="{{ organization.mbox if organization.mbox else ''}}">
            </div>
            <div class="col-lg-1 text-right mt-2">
                <button type="button"
                        class="btn btn-secondary mt-4 d-flex justify-content-flex-end align-content-between"
                        onclick="deleteAuthor(this)">
                    <i class="material-icons  md-18">delete_forever</i>
                </button>
            </div>
        </div>
        {% endfor %}
        {% endif %}
    </div>

    <button type="button"
            class="btn btn-secondary"
            data-toggle="modal" data-target="#authorModal">
        <i class="material-icons mr-1">person_add_alt_1</i>Add Author
    </button>
    <button type="button"
            class="btn btn-secondary"
            onclick="addOrganization()">
        <i class="material-icons mr-1">add_business</i>Add Organization
    </button>
</div>