<div class="row">
  <div class="col-md-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">OTP: <%= email %></h3>
        <div class="card-tools">
          <button class="btn btn-sm btn-outline-secondary" id="checkOtpBtn" data-email="<%= encodeURIComponent(email) %>">
            <i class="fas fa-sync-alt mr-1"></i> Cek OTP Sekarang
          </button>
        </div>
      </div>
      <div class="card-body p-0">
        <% if (!hasCredential) { %>
          <div class="alert alert-info m-3 mb-0">
            <i class="fas fa-info-circle mr-1"></i>
            Mailbox ini belum punya kredensial IMAP tersimpan (dibuat sebelum fitur Baca OTP aktif, atau
            passwordnya sudah pernah direset lewat aplikasi tanpa memperbarui kredensial IMAP). Cek OTP
            otomatis tidak bisa dilakukan untuk mailbox ini.
          </div>
        <% } else { %>
          <% if (fetchError) { %>
            <div class="alert alert-warning m-3 mb-0"><i class="fas fa-exclamation-triangle mr-1"></i> <%= fetchError %></div>
          <% } %>
          <ul class="list-group list-group-flush">
            <% if (!messages.length) { %>
              <li class="list-group-item text-muted">Belum ada OTP yang terdeteksi di mailbox ini.</li>
            <% } %>
            <% messages.forEach(function (msg) { %>
              <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                  <div>
                    <span class="otp-code" style="font-size:1.4rem;font-weight:700;letter-spacing:2px"><%= msg.otp_code %></span>
                    <button class="btn btn-sm btn-link btn-copy-otp" data-code="<%= msg.otp_code %>" title="Salin kode">
                      <i class="fas fa-copy"></i>
                    </button>
                  </div>
                  <span class="badge badge-secondary otp-countdown" data-expires="<%= msg.expires_at %>">-</span>
                </div>
                <div class="small text-muted"><%= msg.subject %> &middot; dari <%= msg.sender %></div>
                <div class="small text-muted">Diterima: <%= msg.received_at ? formatDateTime(msg.received_at) : '-' %></div>
              </li>
            <% }); %>
          </ul>
        <% } %>
      </div>
      <div class="card-footer">
        <a href="/email/<%= encodeURIComponent(email) %>" class="btn btn-secondary"><i class="fas fa-arrow-left mr-1"></i> Kembali ke Detail Email</a>
      </div>
    </div>
  </div>
</div>

<script src="/js/otp.js?v=<%= assetVersion %>"></script>
