{% load i18n %}
<div class="row g-4">
  <div class="col-md-7">

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Operating Modes</h6>
      </div>
      <div class="card-body d-flex flex-column gap-0">

        <div class="d-flex align-items-center justify-content-between py-3">
          <div>
            <div style="font-size:.9rem; font-weight:500;">App Mode</div>
            <div class="text-muted" style="font-size:.8rem;">
              Enables PWA functionality and native behavior on mobile devices.
            </div>
          </div>
          <div class="form-check form-switch ms-3 flex-shrink-0">
            <input class="form-check-input" type="checkbox" role="switch" checked style="width:2.2em;height:1.2em;">
          </div>
        </div>
        <hr class="my-0">

        <div class="d-flex align-items-center justify-content-between py-3">
          <div>
            <div class="d-flex align-items-center gap-2" style="font-size:.9rem; font-weight:500;">
              Maintenance Mode
              <span class="badge" style="background:#fef9c3;color:#854d0e;font-size:.7rem;">Off</span>
            </div>
            <div class="text-muted" style="font-size:.8rem;">
              When enabled, the SITE shows a placeholder page for all visitors except staff.
            </div>
          </div>
          <div class="form-check form-switch ms-3 flex-shrink-0">
            <input class="form-check-input" type="checkbox" role="switch" style="width:2.2em;height:1.2em;">
          </div>
        </div>

      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Custom Scripts</h6>
      </div>
      <div class="card-body d-flex flex-column gap-3">

        <div>
          <label class="form-label text-muted mb-1" style="font-size:.8rem;">
            Head Scripts
            <span class="ms-1" style="font-size:.75rem;">(Inserted before &lt;/head&gt;)</span>
          </label>
          <textarea class="form-control form-control-sm font-monospace"
                    rows="4"
                    placeholder="<!-- Your code here -->"
                    style="font-size:.8rem; resize:vertical;"></textarea>
        </div>
        <hr class="my-0">
            {% translate "Head Scripts" %}
            <span class="ms-1" style="font-size:.75rem;">{% translate "(Inserted before &lt;/head&gt;)" %}</span>
          </label>
          <textarea class="form-control form-control-sm font-monospace"
                    rows="4"
                    placeholder="{% translate '<!-- Your code here -->' %}"
                    style="font-size:.8rem; resize:vertical;"></textarea>
        </div>
        <hr class="my-0">

        <div>
          <label class="form-label text-muted mb-1" style="font-size:.8rem;">
            {% translate "Body Scripts" %}
            <span class="ms-1" style="font-size:.75rem;">{% translate "(Inserted before &lt;/body&gt;)" %}</span>
          </label>
          <textarea class="form-control form-control-sm font-monospace"
                    rows="4"
                    placeholder="{% translate '<!-- Your code here -->' %}"
                    style="font-size:.8rem; resize:vertical;"></textarea>
        </div>

        <div class="d-flex justify-content-end pt-1">
          <button class="btn btn-primary btn-sm px-4">{% translate "Save" %}</button>
        </div>

      </div>
    </div>

  </div>
</div>