modals.html

</form>
</main>
<!-- ICGEM Wrong Application Modal -->
<div class="modal fade" id="modal-icgem-wrong-app" tabindex="-1" aria-labelledby="modal-icgem-wrong-app-label"
    aria-describedby="modal-icgem-wrong-app-description" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-icgem-wrong-app-label"
                    data-translate="modals.icgemWrongApp.title">ICGEM Metadata File Detected</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-0" role="alert">
                    <p class="mb-0" id="modal-icgem-wrong-app-description"
                        data-translate="modals.icgemWrongApp.body">Dear user,
                        
                        it looks like you are uploading an ICGEM metadata file to ELMO. This is possible, but not in this version. Please go to ELMOGEM (https://icgem.gfz.de/elmogem) to complete the metadata delivery for the gravity-related product.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                    data-translate="modals.icgemWrongApp.close">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Upload Modal -->
<div class="modal fade" id="modal-uploadxml" tabindex="-1" aria-labelledby="modal-uploadxml-label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-uploadxml-label" data-translate="modals.upload.modalTitle">Metadatendatei laden</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>            
            <div class="modal-body">
                <div class="mb-3">
                    <label for="input-uploadxml-file" class="form-label" data-translate="modals.upload.title">Select XML or JSON-LD file:</label>
                    <input class="form-control" type="file" id="input-uploadxml-file" accept=".xml,.jsonld,application/xml,text/xml,application/ld+json">
                </div>

                <div class="drop-zone mb-3 p-5 border rounded text-center" id="panel-uploadxml-dropfile">
                    <p class="mb-0" data-translate="modals.upload.dropZoneInfo">Drop XML or JSON-LD file here</p>
                </div>
                <div id="upload-spinner-overlay" class="d-none text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden" data-translate="modals.upload.loading">Processing file...</span>
                    </div>
                    <p class="mt-2 text-muted" aria-hidden="true" data-translate="modals.upload.loading">Processing file...</p>
                </div>
                <div class="alert alert-info d-none" id="xml-upload-status"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="helpModalLabel" data-translate="header.help">Help</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Section of guide is inserted dynamically here -->
            </div>
        </div>
    </div>
</div>
<!-- Validation Failed Modal -->
<div class="modal fade" id="modal-validation-failed" tabindex="-1"
    aria-labelledby="modal-validation-failed-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-validation-failed-label"
                    data-translate="modals.validationFailed.title">Submission not possible</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-0" role="alert">
                    <p><strong data-translate="modals.validationFailed.greeting">Dear user,</strong></p>
                    <p data-translate="modals.validationFailed.body">
                        it appears that you want to submit data. Unfortunately, you have not filled in all the required fields.
                    </p>
                    <p id="modal-validation-failed-save-hint"
                        data-translate="modals.validationFailed.saveHint">
                    </p>
                    <p data-translate="modals.validationFailed.fixHint">
                        Otherwise, please complete the fields marked in red and try again.
                    </p>
                    <p class="mb-0" data-translate="modals.validationFailed.guideHint">
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                    data-translate="modals.validationFailed.close">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Notification Modal -->
<div class="modal fade" id="modal-notification" tabindex="-1" aria-labelledby="modal-notification-label"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-notification-label">Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-notification-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
<!-- Restore Draft Modal -->
<div class="modal fade" id="modal-restore-draft" tabindex="-1" aria-labelledby="modal-restore-draft-label"
    aria-describedby="modal-restore-draft-description" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-restore-draft-label" data-translate="autosave.restore.title">
                    Restore autosaved draft
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="modal-restore-draft-description" data-translate="autosave.restore.foundWithoutTimestamp">
                    We found an autosaved draft from your previous session. Would you like to restore it?
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="button-restore-dismiss"
                    data-bs-dismiss="modal" data-translate="autosave.restore.actions.discard">Discard draft</button>
                <button type="button" class="btn btn-primary" id="button-restore-apply"
                    data-translate="autosave.restore.actions.restore">Restore draft</button>
            </div>
        </div>
    </div>
</div>
<!-- Generic Confirmation Modal -->
<div class="modal fade" id="modal-confirm" tabindex="-1" aria-labelledby="modal-confirm-label"
    aria-describedby="modal-confirm-description" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-confirm-label"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="modal-confirm-description"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="button-confirm-cancel"
                    data-bs-dismiss="modal"></button>
                <button type="button" class="btn btn-primary" id="button-confirm-action"></button>
            </div>
        </div>
    </div>
</div>
<!-- Changelog Modal -->
<div class="modal fade" id="modal-changelog" tabindex="-1" aria-labelledby="label-changelog-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="label-changelog-modal" data-translate="modals.changelog.aboutHeading">About ELMO - Enhanced Linked Metadata Organizer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- Welcome Modal Overlay -->
            <div class="modal-body">
                <h2 class="text-center" style="font-size: larger; color: inherit;" data-translate="welcome.title"></h2>
                <p class="lead text-center fs-6">
                    <span data-translate="welcome.paragraph1"></span><br>
                    <span data-translate="welcome.paragraph2"></span><br>
                    <span data-translate="welcome.paragraph3"></span>
                </p>
                <p class="lead text-center fs-6" data-translate="modals.changelog.aboutText"></p>
                <hr>
                <!-- Changelog -->
                <h5 data-translate="modals.changelog.title">Changelog</h5>
                <div id="panel-changelog-content">
                    <!-- Content will be loaded from doc/changelog.html -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Save As Modal -->
<div class="modal fade" id="modal-saveas" tabindex="-1" aria-labelledby="label-saveas-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="label-saveas-modal" data-translate="modals.save.saveAs">
                    Save as XML
                </h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <form id="form-saveas-filename">
                        <div class="mb-3">
                        <label for="input-saveas-filename" class="form-label" data-translate="modals.save.filename">
                            Filename
                        </label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="input-saveas-filename">
                            <span class="input-group-text" id="saveas-extension">.xml</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="general.cancel">
                    Cancel
                </button>
                <button type="button" class="btn btn-primary" id="button-saveas-save" data-translate="modals.save.save">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Submit Modal -->
<div class="modal fade" id="modal-submit" tabindex="-1" aria-labelledby="modal-submit-label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-submit-label" data-translate="modals.submit.title">Submit Dataset</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="modal-submit-form">
            <!-- Honeypot field - hidden from humans, bots will fill it -->
            <div style="position: absolute; left: -9999px;" aria-hidden="true">
                <input type="text" id="input-submit-please-fill-in-this-field" name="please-fill-in-this-field" tabindex="-1" autocomplete="off">
            </div>
            
            <!-- Publication urgency dropdown -->
            <div class="mb-3">
              <label for="input-submit-urgency" class="form-label" data-translate="modals.submit.urgency">Urgency</label>
              <select class="form-select" id="input-submit-urgency">
                <option value="" data-translate="modals.submit.urgencyNotice" selected disabled>Please select an urgency</option>
                <option value="2" data-translate="modals.submit.high">high (2 weeks)</option>
                <option value="4" data-translate="modals.submit.normal">normal (4 weeks)</option>
                <option value="6" data-translate="modals.submit.low">low (6 weeks)</option>
              </select>
            </div>
            <!-- Data URL -->
            <div class="mb-3">
              <label for="input-submit-dataurl" class="form-label" data-translate="modals.submit.url">URL to data</label>
              <input type="url" class="form-control" id="input-submit-dataurl" placeholder="https://...">
            </div>
            <!-- PDF upload -->
            <div class="mb-3">
                <label for="input-submit-datadescription" class="form-label" data-translate="modals.submit.dataDescription">Data
                    Description (as mentioned in the Data Description Template)</label>
                <div class="input-group">
                    <input type="file" class="form-control" id="input-submit-datadescription" accept=".pdf,.doc,.docx">
                    <button class="btn btn-outline-danger" type="button" id="remove-file-btn" style="display: none;">
                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                        <span class="visually-hidden">Datei entfernen</span>
                      </button>                      
                </div>
                <small class="form-text text-muted" id="selected-file-name"></small>
            </div>
            <!-- Privacy policy checkbox -->
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" id="input-submit-privacycheck" required>
              <label class="form-check-label" for="input-submit-privacycheck" data-translate="modals.submit.privacypolice">
                I have read the privacy policy and agree to the transmission of my data.
              </label>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="general.cancel">Cancel</button>
          <button type="button" class="btn btn-success" id="button-submit-submit" data-translate="buttons.submit" disabled>Submit</button>
        </div>
      </div>
    </div>
  </div>
<!-- Feedback Modal -->
<!-- Affiliation Tag Edit Modal -->
<div class="modal fade" id="modal-affiliation-edit" tabindex="-1" aria-labelledby="modal-affiliation-edit-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-affiliation-edit-label" data-translate="affiliationEdit.title">Edit Affiliation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-floating">
                    <input type="text" class="form-control" id="input-affiliation-edit-value" autocomplete="off" />
                    <label for="input-affiliation-edit-value" data-translate="general.affiliation">Affiliation</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="affiliationEdit.cancel">Cancel</button>
                <button type="button" class="btn btn-primary" id="button-affiliation-edit-save" data-translate="affiliationEdit.save">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- ORCID Search Modal -->
<div class="modal fade" id="modal-orcid-search" tabindex="-1" aria-labelledby="modal-orcid-search-label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-orcid-search-label" data-translate="orcidSearch.modalTitle">Search ORCID</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="orcid-search-context-group" value="">
                <input type="hidden" id="orcid-search-context-row-index" value="">
                <div class="row mb-3">
                    <div class="col-12 col-sm-5 mb-2 mb-sm-0">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="input-orcid-search-firstname" autocomplete="off" />
                            <label for="input-orcid-search-firstname" data-translate="orcidSearch.firstName">First Name</label>
                        </div>
                    </div>
                    <div class="col-12 col-sm-5 mb-2 mb-sm-0">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="input-orcid-search-lastname" autocomplete="off" />
                            <label for="input-orcid-search-lastname" data-translate="orcidSearch.lastName">Last Name</label>
                        </div>
                    </div>
                    <div class="col-12 col-sm-2 d-grid">
                        <button type="button" class="btn btn-primary h-100" id="button-orcid-search-execute"
                            data-translate="orcidSearch.searchButton">Search</button>
                    </div>
                </div>
                <div id="orcid-search-alert" class="alert alert-warning d-none" role="alert"></div>
                <div id="orcid-search-spinner" class="text-center d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden" data-translate="orcidSearch.searching">Searching...</span>
                    </div>
                    <p class="mt-2" data-translate="orcidSearch.searching">Searching...</p>
                </div>
                <div id="orcid-search-results" class="d-none">
                    <h6 data-translate="orcidSearch.resultsHeading">Search Results</h6>
                    <div class="table-responsive">
                        <table class="table table-hover table-sm" id="orcid-search-results-table">
                            <thead>
                                <tr>
                                    <th scope="col" data-translate="orcidSearch.columnOrcid">ORCID</th>
                                    <th scope="col" data-translate="orcidSearch.columnLastName">Last Name</th>
                                    <th scope="col" data-translate="orcidSearch.columnFirstName">First Name</th>
                                    <th scope="col" data-translate="orcidSearch.columnAffiliation">Affiliation(s)</th>
                                    <th scope="col"><span class="visually-hidden">Action</span></th>
                                </tr>
                            </thead>
                            <tbody id="orcid-search-results-body">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="orcid-search-no-results" class="d-none text-center text-muted py-3">
                    <p data-translate="orcidSearch.noResults">No results found.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Feedback Modal -->
<div class="modal fade" id="modal-feedback" tabindex="-1" aria-labelledby="label-feedbackmodal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title fs-5" id="label-feedbackmodal" data-translate="modals.feedback.title">Feedback</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>            
            <div class="modal-body">
                <div id="panel-feedback-status" aria-live="polite" aria-atomic="true" hidden=""></div>
                <div id="panel-feedback-message"
                    class="feedback-message-thanks"
                    role="status"
                    aria-live="polite"
                    aria-atomic="true"
                    tabindex="-1"
                    hidden=""
                    data-translate="modals.feedback.thankYou">Thank you for your feedback.</div>
                <form id="form-feedback" method="POST" action="send_feedback_mail.php">
                    <!-- Honeypot field - hidden from humans, bots will fill it -->
                    <div style="position: absolute; left: -9999px;" aria-hidden="true">
                        <input type="text" id="input-feedback-please-fill-in-this-field" name="please-fill-in-this-field" tabindex="-1" autocomplete="off">
                    </div>
                    <!-- Hidden fields for security -->
                    <input type="hidden" name="csrf-token" id="input-feedback-csrf-token" value="">
                    <div class="mb-3">
                        <label for="input-feedback-question1" class="form-label"
                            data-translate="modals.feedback.question1">Which functions of the new metadata editor do you find particularly helpful?</label>
                        <textarea class="form-control" id="input-feedback-question1" name="feedbackQuestion1" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question2" class="form-label"
                            data-translate="modals.feedback.question2">Is there a particular design or user interface change that you like?</label>
                        <textarea class="form-control" id="input-feedback-question2" name="feedbackQuestion2" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question3" class="form-label"
                            data-translate="modals.feedback.question3">What do you find positive about the usability of the new editor?</label>
                        <textarea class="form-control" id="input-feedback-question3" name="feedbackQuestion3" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question4" class="form-label"
                            data-translate="modals.feedback.question4">Which functions of the new editor do you find difficult to use?</label>
                        <textarea class="form-control" id="input-feedback-question4" name="feedbackQuestion4" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question5" class="form-label"
                            data-translate="modals.feedback.question5">Are there any aspects of the user interface that you find confusing or annoying?</label>
                        <textarea class="form-control" id="input-feedback-question5" name="feedbackQuestion5" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question6" class="form-label"
                            data-translate="modals.feedback.question6">Do you miss certain functions in the new metadata editor?</label>
                        <textarea class="form-control" id="input-feedback-question6" name="feedbackQuestion6" rows="3"
                            required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="input-feedback-question7" class="form-label"
                            data-translate="modals.feedback.question7">Is there a specific improvement you would like to see?</label>
                        <textarea class="form-control" id="input-feedback-question7" name="feedbackQuestion7" rows="3"
                            required></textarea>
                    </div>
                    <button class="btn btn-primary feedback-button-send" type="submit" id="button-feedback-send"
                        data-translate="modals.feedback.sendButton">Send feedback</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- DOI Prefill Confirmation Modal -->
<div class="modal fade" id="modal-doi-prefill" tabindex="-1" aria-labelledby="modal-doi-prefill-label"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-doi-prefill-label" data-translate="doiPrefill.modalTitle">Pre-fill
                    from DOI</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p data-translate="doiPrefill.modalMessage">The following metadata was found for this DOI. Do you want
                    to pre-fill the form?</p>
                <div id="doi-prefill-preview" class="doi-prefill-preview mt-2"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="button-doi-prefill-cancel"
                    data-bs-dismiss="modal" data-translate="doiPrefill.cancel">Cancel</button>
                <button type="button" class="btn btn-primary" id="button-doi-prefill-confirm"
                    data-translate="doiPrefill.confirm">Apply</button>
            </div>
        </div>
    </div>
</div>
<!-- Upload Feedback Toast -->
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1090;" id="toast-upload-container">
    <div id="toast-upload-feedback" class="toast align-items-center border-0" role="alert"
         aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="toast-upload-feedback-body">
                <i id="toast-upload-feedback-icon" class="bi me-2" aria-hidden="true"></i>
                <span id="toast-upload-feedback-message"></span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto"
                    data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>