{% extends "base.html" %}
{% block title %}{{ workspace.name }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <nav class="breadcrumb">
      <a href="/">Studio</a> /
      {% if workspace.organization_id %}
      <a href="/orgs/{{ workspace.organization_id }}">{{ workspace.organization_name or org_entity_label }}</a> /
      {% endif %}
      {{ workspace.name }}
    </nav>
    <h1>{{ workspace.name }}</h1>
    <p class="subtitle">Workspace — projects and members</p>
  </div>
  <div class="page-header-actions">
    <a href="/projects/new?workspace_id={{ workspace.id }}" class="btn btn-primary">New project here</a>
  </div>
</div>

<div class="tabs" role="tablist" id="ws-tabs">
  <button type="button" class="tab active" data-tab="projects">Projects</button>
  <button type="button" class="tab" data-tab="members">Members</button>
</div>

<div class="tab-panel active" id="panel-projects">
  <section class="section">
    {% if projects %}
    <div class="project-grid">
      {% for p in projects %}
      <div class="project-card studio-card">
        <a href="/projects/{{ p.id }}" class="project-card-link">
          <div class="project-type">{{ p.project_type.value | replace('_', ' ') | title }}</div>
          <h3>{{ p.name }}</h3>
          <p>{{ p.description or 'Datasets · annotation · pipelines · training · models' }}</p>
          <div class="project-meta">
            <span>{{ p.annotated_count }} / {{ p.image_count }} labeled</span>
            <span>{{ p.class_count }} classes</span>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
      <h3>No projects in this workspace</h3>
      <a href="/projects/new?workspace_id={{ workspace.id }}" class="btn btn-primary">Create project</a>
    </div>
    {% endif %}
  </section>
</div>

<div class="tab-panel" id="panel-members">
  <section class="section">
    {% if management_enabled %}
    <div class="form-card" style="margin-bottom:1.25rem;max-width:40rem">
      <h3 style="margin-top:0">Add workspace member</h3>
      <div class="form-group">
        <label for="ws-member-email">Email</label>
        <input type="email" id="ws-member-email" placeholder="colleague@company.com">
      </div>
      <div class="form-group">
        <label for="ws-member-name">Display name <span class="muted">(new users)</span></label>
        <input type="text" id="ws-member-name" placeholder="Optional">
      </div>
      <div class="form-group">
        <label for="ws-member-password">Password <span class="muted">(to create new account)</span></label>
        <input type="password" id="ws-member-password" autocomplete="new-password">
      </div>
      <div class="form-group">
        <label for="ws-member-role">Role</label>
        <select id="ws-member-role"></select>
      </div>
      <button type="button" class="btn btn-primary" id="add-ws-member">Add member</button>
      <p id="ws-member-msg" class="field-hint" style="min-height:1.2em"></p>
    </div>
    <ul class="version-list" id="ws-member-list"><li class="muted">Loading…</li></ul>
    {% else %}
    <div class="empty-state">
      <h3>Workspace members require Team or Enterprise</h3>
      <p class="muted">Deploy with auth enabled to collaborate on this workspace.</p>
    </div>
    {% endif %}
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
  window.__WORKSPACE_ID__ = {{ workspace.id }};
  window.__ORG_ID__ = {{ workspace.organization_id or 'null' }};
  window.__MANAGEMENT_ENABLED__ = {{ management_enabled|tojson }};
</script>
<script src="/static/js/workspace_mgmt.js"></script>
{% endblock %}