{% extends "base.html" %}
{% block title %}{{ org_nav_label }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>{{ org_nav_label }}</h1>
    <p class="subtitle">Platform → {{ org_entity_label }} → Workspace → Project</p>
  </div>
  <div class="page-header-actions">
    {% if management_enabled %}
    <button type="button" class="btn btn-secondary" id="open-create-org">New {{ org_entity_label|lower }}</button>
    {% endif %}
    <a href="/projects/new" class="btn btn-primary">New project</a>
  </div>
</div>

<p class="muted" style="margin-bottom:1rem">
  <strong>Workspaces</strong> and <strong>projects</strong> are different: a {{ org_entity_label|lower }} holds
  workspaces; each workspace holds projects (datasets, annotation, pipelines, training, models).
  {% if management_enabled %}
  Open a {{ org_entity_label|lower }} to manage members and create workspaces.
  {% endif %}
</p>

{% for org in tree.organizations %}
<div class="action-card" style="margin-bottom:1rem">
  <div class="section-toolbar">
    <div>
      <h2 style="margin:0;font-size:1.15rem"><a href="/orgs/{{ org.id }}">{{ org.name }}</a></h2>
      <p class="muted" style="margin:.25rem 0 0;font-size:.85rem">{{ org.workspace_count }} workspaces · {{ org.project_count }} projects</p>
    </div>
    <div style="display:flex;gap:.4rem;flex-wrap:wrap">
      <a href="/orgs/{{ org.id }}#members" class="btn btn-ghost btn-sm">Members</a>
      <a href="/orgs/{{ org.id }}" class="btn btn-secondary btn-sm">Manage</a>
    </div>
  </div>
  {% if org.workspaces %}
  <div class="action-grid" style="grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-top:.75rem">
    {% for ws in org.workspaces %}
    <a class="action-card" href="/workspaces/{{ ws.id }}" style="margin:0;text-decoration:none;color:inherit">
      <h3 style="margin:0;font-size:.95rem">{{ ws.name }}</h3>
      <p class="muted" style="font-size:.8rem;margin:.35rem 0 0">{{ ws.projects|length }} projects</p>
      <ul class="muted" style="font-size:.75rem;padding-left:1rem;margin:.5rem 0 0">
        {% for p in ws.projects[:5] %}
        <li>{{ p.name }}</li>
        {% else %}
        <li>No projects yet</li>
        {% endfor %}
      </ul>
    </a>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% else %}
<div class="empty-state">
  <h3>No {{ org_nav_label|lower }} yet</h3>
  <p class="muted">
    {% if management_enabled %}
    Create your first {{ org_entity_label|lower }}, or complete <a href="/setup">initial setup</a>.
    {% else %}
    Open Studio once to create the Personal organization and Default workspace.
    {% endif %}
  </p>
</div>
{% endfor %}

{% if management_enabled %}
<dialog class="oo-dialog" id="create-org-dialog">
  <form method="dialog" id="create-org-form" class="form-card" style="margin:0;min-width:min(100%,22rem)">
    <h3 style="margin-top:0">New {{ org_entity_label|lower }}</h3>
    <div class="form-group">
      <label for="org-name">Name</label>
      <input type="text" id="org-name" required placeholder="e.g. Vision Lab">
    </div>
    <div class="form-group">
      <label for="org-slug">Slug <span class="muted">(optional)</span></label>
      <input type="text" id="org-slug" placeholder="auto from name">
    </div>
    <p id="org-create-error" class="field-hint" style="color:var(--danger);min-height:1.2em"></p>
    <div class="form-actions" style="justify-content:flex-end;gap:.5rem">
      <button type="button" class="btn btn-ghost" id="org-create-cancel">Cancel</button>
      <button type="submit" class="btn btn-primary">Create</button>
    </div>
  </form>
</dialog>
{% endif %}
{% endblock %}
{% block scripts %}
{% if management_enabled %}
<script>
(function () {
  const dialog = document.getElementById('create-org-dialog');
  document.getElementById('open-create-org')?.addEventListener('click', () => {
    document.getElementById('org-create-error').textContent = '';
    dialog?.showModal();
  });
  document.getElementById('org-create-cancel')?.addEventListener('click', () => dialog?.close());
  document.getElementById('create-org-form')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const err = document.getElementById('org-create-error');
    err.textContent = '';
    try {
      const org = await api('/api/orgs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: document.getElementById('org-name').value.trim(),
          slug: document.getElementById('org-slug').value.trim(),
        }),
      });
      location.href = `/orgs/${org.id}`;
    } catch (ex) {
      err.textContent = ex.message || 'Failed';
    }
  });
})();
</script>
{% endif %}
{% endblock %}