{% extends "base.html" %}

{% block title %}Workspace Settings | TrustForge{% endblock %}
{% block meta_description %}Manage your TrustForge workspace, business profile, and team roles.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
      <div>
        <div class="tf-eyebrow">Workspace settings</div>
        <h1 class="tf-page-title">{{ current_membership.business.name }}</h1>
        <p class="tf-page-subtitle">Manage the business profile, service territory, review destination, and who has access to this protected trust engine.</p>
      </div>
      <a class="btn tf-btn tf-btn-secondary" href="{% url 'dashboard' %}">Back to dashboard</a>
    </div>

    <div class="row g-4">
      <div class="col-lg-7">
        <div class="tf-panel h-100">
          <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
              <h2 class="h4 mb-2">Business profile</h2>
              <p class="text-secondary-emphasis mb-0">These details anchor onboarding, workspace identity, and public review routing.</p>
            </div>
            <div class="tf-inline-stat">
              <span>Current role</span>
              <strong>{{ current_membership.get_role_display }}</strong>
            </div>
          </div>
          <form method="post" class="row g-3">
            {% csrf_token %}
            <input type="hidden" name="action" value="update_business">
            <div class="col-12">
              <label class="form-label">Business name</label>
              {{ business_form.name }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Industry</label>
              {{ business_form.industry }}
            </div>
            <div class="col-md-3">
              <label class="form-label">Primary city</label>
              {{ business_form.primary_city }}
            </div>
            <div class="col-md-3">
              <label class="form-label">State</label>
              {{ business_form.primary_state }}
            </div>
            <div class="col-12">
              <label class="form-label">Google review URL</label>
              {{ business_form.google_review_url }}
            </div>
            <div class="col-12 pt-2">
              <button type="submit" class="btn tf-btn tf-btn-primary">Save workspace</button>
            </div>
          </form>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="tf-panel h-100">
          <h2 class="h4 mb-3">Role access model</h2>
          <div class="d-grid gap-3">
            <div class="tf-role-card"><strong>Owner / Admin</strong><span>Manage workspace settings, team access, jobs, and proof publishing.</span></div>
            <div class="tf-role-card"><strong>Manager</strong><span>Run the job-to-proof workflow and edit proof cards, but not workspace administration.</span></div>
            <div class="tf-role-card"><strong>Technician</strong><span>Log completed jobs and view pipeline activity inside the assigned business only.</span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4 mt-1">
      <div class="col-lg-5">
        <div class="tf-panel h-100">
          <h2 class="h4 mb-3">Add team member</h2>
          <p class="text-secondary-emphasis">Attach a user to this workspace. New users can use the forgot-password flow to activate access if they do not have a password yet.</p>
          <form method="post" class="row g-3">
            {% csrf_token %}
            <input type="hidden" name="action" value="invite_member">
            <div class="col-md-6">
              <label class="form-label">First name</label>
              {{ invite_form.first_name }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Last name</label>
              {{ invite_form.last_name }}
            </div>
            <div class="col-12">
              <label class="form-label">Email</label>
              {{ invite_form.email }}
            </div>
            <div class="col-12">
              <label class="form-label">Role</label>
              {{ invite_form.role }}
            </div>
            <div class="col-12 pt-2">
              <button type="submit" class="btn tf-btn tf-btn-primary">Add member</button>
            </div>
          </form>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="tf-panel h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h4 mb-0">Workspace team</h2>
            <span class="tf-card-tag">{{ team_members|length }} seats</span>
          </div>
          <div class="d-grid gap-3">
            {% for membership in team_members %}
            <div class="tf-team-member">
              <div>
                <strong>{{ membership.user.get_full_name|default:membership.user.email }}</strong>
                <div class="small text-secondary-emphasis">{{ membership.user.email }}</div>
              </div>
              <div class="text-end">
                <span class="tf-status-pill tf-role-pill">{{ membership.get_role_display }}</span>
                <div class="small text-secondary-emphasis mt-1">Joined {{ membership.created_at|date:"M j, Y" }}</div>
              </div>
            </div>
            {% empty %}
            <div class="tf-empty-state text-start">
              <h3 class="h5 mb-2">No team members yet</h3>
              <p class="text-secondary-emphasis mb-0">Invite admins, managers, and technicians to turn this workspace into a real multi-user SaaS account.</p>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}