<form method="post" class="glass-panel setup-form" novalidate>
  {% csrf_token %}
  <div class="row g-4">
    <div class="col-lg-6">
      <label class="form-label" for="{{ form.title.id_for_label }}">Workspace label</label>
      {{ form.title }}
      {% if form.title.help_text %}<div class="form-hint">{{ form.title.help_text }}</div>{% endif %}
      {% for error in form.title.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
    </div>
    <div class="col-lg-6">
      <label class="form-label" for="{{ form.public_url.id_for_label }}">Public URL</label>
      {{ form.public_url }}
      {% if form.public_url.help_text %}<div class="form-hint">{{ form.public_url.help_text }}</div>{% endif %}
      {% for error in form.public_url.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
    </div>
    <div class="col-md-4">
      <label class="form-label" for="{{ form.node_version.id_for_label }}">Node target</label>
      {{ form.node_version }}
      <div class="form-hint">{{ form.node_version.help_text }}</div>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="{{ form.package_manager.id_for_label }}">Package manager</label>
      {{ form.package_manager }}
      <div class="form-hint">{{ form.package_manager.help_text }}</div>
    </div>
    <div class="col-md-4">
      <label class="form-label" for="{{ form.email_provider.id_for_label }}">Email path</label>
      {{ form.email_provider }}
      <div class="form-hint">{{ form.email_provider.help_text }}</div>
    </div>
    <div class="col-12">
      <div class="service-readiness-grid">
        <div class="service-toggle">
          <div>
            <label class="form-check-label" for="{{ form.postgres_ready.id_for_label }}">PostgreSQL ready</label>
            <div class="form-hint">{{ form.postgres_ready.help_text }}</div>
          </div>
          <div class="form-check form-switch m-0">{{ form.postgres_ready }}</div>
        </div>
        <div class="service-toggle">
          <div>
            <label class="form-check-label" for="{{ form.redis_ready.id_for_label }}">Redis ready</label>
            <div class="form-hint">{{ form.redis_ready.help_text }}</div>
          </div>
          <div class="form-check form-switch m-0">{{ form.redis_ready }}</div>
        </div>
        <div class="service-toggle">
          <div>
            <label class="form-check-label" for="{{ form.temporal_ready.id_for_label }}">Temporal ready</label>
            <div class="form-hint">{{ form.temporal_ready.help_text }}</div>
          </div>
          <div class="form-check form-switch m-0">{{ form.temporal_ready }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <label class="form-label" for="{{ form.upload_strategy.id_for_label }}">Upload strategy</label>
      {{ form.upload_strategy }}
      <div class="form-hint">{{ form.upload_strategy.help_text }}</div>
    </div>
    <div class="col-md-7">
      <label class="form-label" for="{{ form.notes.id_for_label }}">Notes</label>
      {{ form.notes }}
      {% for error in form.notes.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
    </div>
  </div>
  {% if form.non_field_errors %}
  <div class="field-error mt-3">{{ form.non_field_errors }}</div>
  {% endif %}
  <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3 mt-4">
    <p class="helper-copy mb-0">Saving a brief generates a live detail page with prerequisite status, env variables, and boot commands.</p>
    <button class="btn btn-highlight btn-lg" type="submit">{{ submit_label|default:"Save install brief" }}</button>
  </div>
</form>
