{% extends "base.html" %}

{% block title %}Create Your Workspace | TrustForge{% endblock %}
{% block meta_description %}Create your TrustForge business workspace, set your service area, and start the protected proof pipeline.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="row g-4 align-items-start">
      <div class="col-lg-5">
        <div class="tf-panel sticky-lg-top tf-sticky-panel">
          <div class="tf-eyebrow">Business onboarding</div>
          <h1 class="tf-page-title">Create your first TrustForge workspace</h1>
          <p class="tf-page-subtitle">This workspace becomes the protected home for your completed jobs, review requests, proof cards, and team permissions.</p>
          <div class="d-grid gap-3 mt-4">
            <div class="tf-check-row"><span>01</span> Create your business workspace</div>
            <div class="tf-check-row"><span>02</span> Become the owner automatically</div>
            <div class="tf-check-row"><span>03</span> Invite admins, managers, and technicians</div>
            <div class="tf-check-row"><span>04</span> Keep every job and proof asset scoped securely</div>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="tf-panel">
          <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
              <div class="tf-eyebrow">Workspace details</div>
              <h2 class="h3 mb-2">Set up the business your team will operate inside</h2>
              <p class="text-secondary-emphasis mb-0">You can update branding details later from workspace settings. The trust pipeline and team access will use this business as the default scope.</p>
            </div>
            <div class="tf-inline-stat">
              <span>Protected SaaS</span>
              <strong>Multi-tenant ready</strong>
            </div>
          </div>
          <form method="post" class="row g-3">
            {% csrf_token %}
            <div class="col-12">
              <label class="form-label">Business name</label>
              {{ form.name }}
              {% if form.name.errors %}<div class="text-danger small mt-1">{{ form.name.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label">Industry</label>
              {{ form.industry }}
              {% if form.industry.errors %}<div class="text-danger small mt-1">{{ form.industry.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-md-3">
              <label class="form-label">Primary city</label>
              {{ form.primary_city }}
              {% if form.primary_city.errors %}<div class="text-danger small mt-1">{{ form.primary_city.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-md-3">
              <label class="form-label">State</label>
              {{ form.primary_state }}
              {% if form.primary_state.errors %}<div class="text-danger small mt-1">{{ form.primary_state.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="col-12">
              <label class="form-label">Google review URL <span class="text-secondary-emphasis">(optional)</span></label>
              {{ form.google_review_url }}
              {% if form.google_review_url.errors %}<div class="text-danger small mt-1">{{ form.google_review_url.errors|join:', ' }}</div>{% endif %}
            </div>
            {% if form.non_field_errors %}
            <div class="col-12"><div class="text-danger small">{{ form.non_field_errors|join:', ' }}</div></div>
            {% endif %}
            <div class="col-12 pt-2 d-flex flex-wrap gap-3 align-items-center">
              <button type="submit" class="btn tf-btn tf-btn-primary">Create workspace</button>
              <span class="small text-secondary-emphasis">You will be assigned as the owner and land inside your dashboard immediately.</span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}