<div class="board-info">
    <h2>Current Board Members:</h2>
    <p class="chair">Thian-Peng Ter (Chair)</p>
    <div class="board-list">
      <p>Amy Xiao (term 1 complete)</p>
      <p>Jacqueline Wang (Treasurer, term 1 complete)</p>
      <p>Xiaoying Shen (Member at Large, term 2 complete, outgoing)</p>
      <p>Phoenix Mao (Secretary - term 2 complete, outgoing)</p>
    </div>
  </div>

  <div class="instructions-box">
    <p>This <strong>resource</strong> is designed to <strong>facilitate</strong> thoughtful
      <strong>dialogue</strong> and is intended to <strong>complement</strong> — not substitute — the vital
      practices of <strong>prayerful reflection</strong>, <strong>congregational engagement</strong>, and the
      <strong>guidance of the Holy Spirit</strong>. We must avoid relying exclusively on <strong>quantitative
        assessments</strong> when making our <strong>final decision</strong>. Such a decision should be enriched by
      the <strong>collective wisdom</strong> and <strong>guidance</strong> provided by our <strong>fellow
        leaders</strong> and the <strong>broader church community</strong>.
    </p>
  </div>

  <div class="instructions-box">
    <p>Consider this guide as a <strong>foundational tool</strong> for <strong>alignment</strong>. Every
      <strong>nomination committee member</strong> must share a <strong>clear</strong> and <strong>consistent
        understanding</strong> of the <strong>criteria</strong> behind each <strong>score</strong>. Additionally, it
      is important to recognize that a <strong>lower score</strong> in one dimension does not automatically
      <strong>exclude</strong> a candidate. For example, an individual may exhibit <strong>strong character</strong>
      and <strong>wisdom</strong> but might have <strong>limited availability</strong> due to <strong>legitimate
        commitments</strong>. We should <strong>weigh</strong> the candidates' <strong>diverse strengths</strong>
      and <strong>growth areas</strong>, considering our <strong>congregation's unique needs</strong> and
      <strong>circumstances</strong>.
    </p>
  </div>

  <div class="navigation">
    <button class="btn btn-primary" onclick="showPage('page-email')">Continue to Email Entry</button>
  </div>
</div>

<!-- Page 2: Email Entry -->
<div id="page-email" class="page">
  <div class="header">
    <h1>Evaluator Information</h1>
  </div>

  <div class="section">
    <h2>Enter Your Email Address</h2>
    <p class="help-text">Please enter your email address. If you have previously submitted an evaluation, we will
      load your responses for editing.</p>

    <div class="email-entry">
      <label for="evaluatorEmail">Email Address</label>
      <input type="email" id="evaluatorEmail" name="evaluatorEmail" placeholder="your.email@example.com" required>
      <span class="email-error" id="emailError"></span>
    </div>

    <div id="auto-resume-notice" class="info-box" style="display: none;">
      <p><strong>Welcome back!</strong> We found a saved evaluation for <span id="saved-email-display"></span>.</p>
      <button class="btn btn-primary btn-small" style="margin-top: 10px;" onclick="autoResumeEvaluation()">Resume
        Evaluation</button>
      <button class="btn btn-link" onclick="clearSavedEmail()">Use Different Email</button>
    </div>

    <!-- PIN Entry Section -->
    <div id="pin-entry-section" class="email-entry" style="display: none; margin-top: 20px;">
      <label for="evaluatorPIN">Access PIN</label>
      <input type="text" id="evaluatorPIN" name="evaluatorPIN" placeholder="Enter 6-digit PIN" maxlength="6"
        pattern="[0-9]{6}" inputmode="numeric">
      <span class="email-error" id="pinError"></span>
      <p class="help-text" style="margin-top: 10px;">
        A 6-digit PIN is required for security.
        <button type="button" class="btn btn-link" style="padding: 0; font-size: 0.9em;"
          onclick="requestPINEmail()">Send PIN to my email</button>
      </p>
    </div>

    <div id="pin-sent-notice" class="info-box"
      style="display: none; margin-top: 15px; background-color: #d1ecf1; border-color: #bee5eb;">
      <p>📧 <strong>PIN sent!</strong> Check your email for your access PIN.</p>
    </div>

    <div id="existing-evaluation-notice" class="info-box" style="display: none;">
      <p><strong>Existing evaluation found!</strong> Your previous responses will be loaded for editing.</p>
    </div>

    <div id="new-evaluation-notice" class="info-box" style="display: none;">
      <p>Starting a new evaluation. You can save and return later using this email address.</p>
    </div>
  </div>

  <div class="navigation">
    <button type="button" class="btn btn-secondary" onclick="showPage('page-instructions')">Back to
      Instructions</button>
    <button type="button" class="btn btn-primary" id="emailContinueBtn"
      onclick="validateEmailAndContinue()">Continue to Evaluation</button>
  </div>
</div>

<!-- Page 3+: Nominee Evaluation Pages (Generated Dynamically) -->
<div id="nominee-pages-container"></div>

<!-- Summary Page -->
<div id="page-summary" class="page">
  <div class="header">
    <h1>Evaluation Summary</h1>
  </div>

  <div class="section">
    <h2>Review Your Evaluations</h2>
    <p class="help-text">Review your scores for all nominees before submitting. You can go back to edit any
      nominee or submit partial evaluations.</p>

    <div id="summary-content"></div>
  </div>

  <div class="navigation">
    <button type="button" class="btn btn-secondary" onclick="goToLastNominee()">Back to Last Nominee</button>
    <button type="submit" class="btn btn-primary" id="submitBtn" onclick="handleFinalSubmit()">Submit
      Evaluation</button>
  </div>
</div>

<!-- Success Message -->
<div id="page-success" class="page">
  <div class="success-message">
    <div class="success-icon">✓</div>
    <h2 id="success-title">Evaluation Submitted Successfully!</h2>
    <p>Thank you for completing the nomination evaluation.</p>
    <p id="success-detail">Your responses have been recorded.</p>
    <p class="help-text">You can return anytime and use your email address to edit your evaluation.</p>
    <div class="navigation">
      <button class="btn btn-primary" onclick="location.reload()">Close</button>
    </div>
  </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay">
  <div class="spinner"></div>
  <p id="loading-text">Loading...</p>
</div>

<!-- Error Message -->
<div id="error-message" class="error-message" style="display: none;">
  <span class="error-text"></span>
  <button class="error-close" onclick="hideError()">×</button>
</div>

<!-- Auto-save Indicator -->
<div id="autosave-indicator" class="autosave-indicator" style="display: none;">
  <span class="autosave-icon">💾</span>
  <span class="autosave-text">Saving...</span>
</div>

<!-- Sidebar Navigation (for nominees) -->
<div id="sidebar-nav" class="sidebar-nav">
  <div class="sidebar-header">
    <h3>Nominees</h3>
    <button class="sidebar-toggle" onclick="toggleSidebar()">
      <span class="toggle-icon">☰</span>
    </button>
  </div>
  <div class="sidebar-content">
    <ul id="sidebar-nominee-list"></ul>
  </div>
</div>