{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/consultants/templates/consultants/_consultant_tabs.html" %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Consultant Workspace</h2>
      <p class="text-sm text-slate-500">SaaS / franchise workspace foundation for your consultant portal.</p>
    </div>
    <div class="flex gap-2">
      <a href="/consultant/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Dashboard</a>
      <a href="/consultant/workspace/edit" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Edit Workspace</a>
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="text-xs uppercase tracking-wide text-slate-500">Workspace Code</div>
      <div class="mt-2 text-lg font-semibold text-slate-900">{{ workspace.workspace_code }}</div>
    </div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="text-xs uppercase tracking-wide text-slate-500">Plan</div>
      <div class="mt-2 text-lg font-semibold text-slate-900">{{ workspace.plan_code.replace('_',' ').title() }}</div>
    </div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="text-xs uppercase tracking-wide text-slate-500">Status</div>
      <div class="mt-2 text-lg font-semibold text-slate-900">{{ workspace.subscription_status.replace('_',' ').title() }}</div>
    </div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="text-xs uppercase tracking-wide text-slate-500">Billing</div>
      <div class="mt-2 text-lg font-semibold text-slate-900">{{ workspace.billing_cycle.replace('_',' ').title() }}</div>
    </div>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white shadow-soft">
    <div class="border-b border-slate-200 px-5 py-4">
      <h3 class="font-semibold text-slate-900">Workspace Details</h3>
    </div>
    <div class="grid gap-4 p-5 md:grid-cols-2">
      <div>
        <div class="text-xs uppercase tracking-wide text-slate-500">Workspace Name</div>
        <div class="mt-1 font-medium text-slate-900">{{ workspace.workspace_name }}</div>
      </div>
      <div>
        <div class="text-xs uppercase tracking-wide text-slate-500">Workspace Type</div>
        <div class="mt-1 font-medium text-slate-900">{{ workspace.workspace_type.replace('_',' ').title() }}</div>
      </div>
      <div>
        <div class="text-xs uppercase tracking-wide text-slate-500">Subscription Period</div>
        <div class="mt-1 font-medium text-slate-900">{{ workspace.subscription_start_date or '-' }} to {{ workspace.subscription_end_date or '-' }}</div>
      </div>
      <div>
        <div class="text-xs uppercase tracking-wide text-slate-500">Limits</div>
        <div class="mt-1 font-medium text-slate-900">{{ workspace.max_managed_clients }} managed clients • {{ workspace.max_user_accounts }} user account(s)</div>
      </div>
      <div class="md:col-span-2">
        <div class="text-xs uppercase tracking-wide text-slate-500">Enabled Features</div>
        <div class="mt-2 flex flex-wrap gap-2 text-xs font-semibold">
          <span class="rounded-full {{ 'bg-emerald-50 text-emerald-700' if workspace.allow_client_portal else 'bg-slate-100 text-slate-600' }} px-2 py-1">Client Portal {{ 'On' if workspace.allow_client_portal else 'Off' }}</span>
          <span class="rounded-full {{ 'bg-emerald-50 text-emerald-700' if workspace.allow_firm_referrals else 'bg-slate-100 text-slate-600' }} px-2 py-1">Firm Referrals {{ 'On' if workspace.allow_firm_referrals else 'Off' }}</span>
          <span class="rounded-full {{ 'bg-emerald-50 text-emerald-700' if workspace.allow_service_marketplace else 'bg-slate-100 text-slate-600' }} px-2 py-1">Marketplace {{ 'On' if workspace.allow_service_marketplace else 'Off' }}</span>
        </div>
      </div>
      {% if workspace.remarks %}
      <div class="md:col-span-2">
        <div class="text-xs uppercase tracking-wide text-slate-500">Remarks</div>
        <div class="mt-1 whitespace-pre-line rounded-xl bg-slate-50 p-3 text-sm text-slate-700">{{ workspace.remarks }}</div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}