import { h } from "./jsx";
import { Sidebar } from "./components/Sidebar";
import { PaliadinWidget } from "./components/PaliadinWidget";
import { BottomNav } from "./components/BottomNav";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";

export function renderAppointmentsDetail(): string {
  return "<!DOCTYPE html>" + (
    <html lang="de">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#BFF355" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="appointments.detail.title">Termin &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body className="has-sidebar">
        <Sidebar currentPath="/events?type=appointment" />
        <BottomNav currentPath="/events?type=appointment" />

        <main>
          <section className="tool-page">
            <div className="container container-narrow">
              <a href="/events?type=appointment" className="back-link" data-i18n="appointments.detail.back">&larr; Zur&uuml;ck zur &Uuml;bersicht</a>

              <div id="appointment-loading" className="entity-loading" data-i18n="appointments.detail.loading">L&auml;dt&hellip;</div>
              <div id="appointment-not-found" style="display:none" className="entity-empty">
                <h2 data-i18n="appointments.detail.notfound">Termin nicht gefunden</h2>
                <p data-i18n="appointments.detail.notfound.hint">Der Termin existiert nicht oder Sie haben keine Berechtigung.</p>
              </div>

              <div id="appointment-body" style="display:none">
                <div className="tool-header">
                  <span className="termin-type-badge" id="appointment-type-badge" />
                  <span id="appointment-pending-approval-badge" className="approval-pending-badge" style="display:none" data-i18n="approvals.pending.badge" title="">
                    Wartet auf Genehmigung
                  </span>
                  <h1 id="appointment-title-display" />
                  <p className="tool-subtitle" id="appointment-time-display" />
                </div>

                <div id="appointment-project-row" className="entity-detail-meta-row" style="display:none">
                  <span className="entity-detail-meta-label" data-i18n="appointments.detail.akte">Akte:</span>
                  <a id="appointment-project-link" className="entity-ref-link" />
                </div>

                <section className="termin-notes-section">
                  <h2 className="frist-section-heading" data-i18n="notes.section.title">Notizen</h2>
                  <div id="notes-container" className="notiz-container" data-parent-type="appointment" />
                </section>

                <form id="appointment-edit-form" className="entity-form">
                  <div className="form-field">
                    <label htmlFor="appointment-title-edit" data-i18n="appointments.field.title">Titel</label>
                    <input type="text" id="appointment-title-edit" required />
                  </div>
                  <div className="form-field">
                    <label htmlFor="appointment-project-edit" data-i18n="appointments.field.akte">Akte (optional)</label>
                    <select id="appointment-project-edit">
                      <option value="" data-i18n="appointments.field.akte.none">Pers&ouml;nlicher Termin</option>
                    </select>
                  </div>
                  <div className="form-field-row">
                    <div className="form-field">
                      <label htmlFor="appointment-start-edit" data-i18n="appointments.field.start">Beginn</label>
                      <input type="datetime-local" id="appointment-start-edit" required />
                    </div>
                    <div className="form-field">
                      <label htmlFor="appointment-end-edit" data-i18n="appointments.field.end">Ende (optional)</label>
                      <input type="datetime-local" id="appointment-end-edit" />
                    </div>
                  </div>
                  <div className="form-field-row">
                    <div className="form-field">
                      <label htmlFor="appointment-type-edit" data-i18n="appointments.field.type">Typ</label>
                      <select id="appointment-type-edit">
                        <option value="" data-i18n="appointments.field.type.none">Kein Typ</option>
                        <option value="hearing" data-i18n="appointments.type.hearing">Verhandlung</option>
                        <option value="meeting" data-i18n="appointments.type.meeting">Besprechung</option>
                        <option value="consultation" data-i18n="appointments.type.consultation">Beratung</option>
                        <option value="deadline_hearing" data-i18n="appointments.type.deadline_hearing">Fristverhandlung</option>
                      </select>
                    </div>
                    <div className="form-field">
                      <label htmlFor="appointment-location-edit" data-i18n="appointments.field.location">Ort</label>
                      <input type="text" id="appointment-location-edit" />
                    </div>
                  </div>
                  <div className="form-field">
                    <label htmlFor="appointment-description-edit" data-i18n="appointments.field.description">Beschreibung</label>
                    <textarea id="appointment-description-edit" rows={3} />
                  </div>

                  <p className="form-msg" id="appointment-edit-msg" />

                  <div className="form-actions">
                    <button type="button" id="appointment-withdraw-btn" className="btn-secondary" style="display:none" data-i18n="approvals.withdraw.cta">Genehmigungsanfrage zur&uuml;ckziehen</button>
                    <button type="button" id="appointment-delete-btn" className="btn-danger" data-i18n="appointments.detail.delete">Termin l&ouml;schen</button>
                    <button type="submit" className="btn-primary btn-cta-lime" data-i18n="appointments.detail.save">&Auml;nderungen speichern</button>
                  </div>
                </form>
              </div>
            </div>
          </section>
        </main>

        <Footer />
        <PaliadinWidget />
        <script src="/assets/appointments-detail.js"></script>
      </body>
    </html>
  );
}
