{% extends "base.html" %}
{% block title %}{{ org.name }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <nav class="breadcrumb"><a href="/">Studio</a> / <a href="/orgs">{{ org_nav_label }}</a> / {{ org.name }}</nav>
    <h1>{{ org.name }}</h1>
    <p class="subtitle">{{ org_entity_label }} management — workspaces, members, roles</p>
  </div>
  <div class="page-header-actions">
    <button type="button" class="btn btn-secondary" id="open-create-workspace">New workspace</button>
    <a href="/projects/new" class="btn btn-primary">New project</a>
  </div>
</div>

<div class="action-card" style="margin-bottom:1rem">
  <p class="muted" style="margin:0;font-size:.85rem">
    Slug <code>{{ org.slug }}</code> · {{ org.workspace_count }} workspaces · {{ org.project_count }} projects
    {% if management_enabled %}
    · {{ edition_label }} console
    {% endif %}
  </p>
</div>

<div class="tabs" role="tablist" id="org-tabs">
  <button type="button" class="tab active" data-tab="workspaces">Workspaces</button>
  <button type="button" class="tab" data-tab="members">Members</button>
  <button type="button" class="tab" data-tab="roles">Roles &amp; permissions</button>
</div>

<div class="tab-panel active" id="panel-workspaces">
  <section class="section">
    <div class="section-toolbar">
      <h2 style="margin:0">Workspaces</h2>
    </div>
    <div class="action-grid" id="workspace-grid" style="grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem">
      {% for ws in workspaces %}
      <a class="action-card" href="/workspaces/{{ ws.id }}" style="text-decoration:none;color:inherit;margin:0">
        <h3 style="margin:0">{{ ws.name }}</h3>
        <p class="muted" style="font-size:.85rem;margin:.4rem 0 0">{{ ws.project_count }} projects · slug <code>{{ ws.slug }}</code></p>
      </a>
      {% else %}
      <p class="muted" id="ws-empty">No workspaces yet. Create one to hold projects.</p>
      {% endfor %}
    </div>
  </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 member</h3>
      <p class="muted" style="font-size:.85rem">Existing users can be added by email. New users need a temporary password.</p>
      <div class="form-group">
        <label for="member-email">Email</label>
        <input type="email" id="member-email" placeholder="colleague@company.com">
      </div>
      <div class="form-group">
        <label for="member-name">Display name <span class="muted">(new users)</span></label>
        <input type="text" id="member-name" placeholder="Optional">
      </div>
      <div class="form-group">
        <label for="member-password">Password <span class="muted">(required only to create a new account)</span></label>
        <input type="password" id="member-password" placeholder="Min 6 characters" autocomplete="new-password">
      </div>
      <div class="form-group">
        <label for="member-role">Role</label>
        <select id="member-role"></select>
      </div>
      <button type="button" class="btn btn-primary" id="add-org-member">Add to {{ org_entity_label|lower }}</button>
      <p id="member-msg" class="field-hint" style="min-height:1.2em"></p>
    </div>
    <ul class="version-list" id="org-member-list">
      <li class="muted">Loading…</li>
    </ul>
    {% else %}
    <div class="empty-state">
      <h3>Members require Team or Enterprise</h3>
      <p class="muted">Set <code>ONEOPEN_DEPLOYMENT_MODE=team</code> (or enterprise), complete <a href="/setup">/setup</a>, then manage users here.</p>
    </div>
    {% endif %}
  </section>
</div>

<div class="tab-panel" id="panel-roles">
  <section class="section">
    <p class="muted" style="margin-top:0">Built-in and custom roles for this {{ org_entity_label|lower }}. Custom roles can be assigned to members.</p>

    {% if management_enabled %}
    <div class="form-card" style="margin-bottom:1.25rem;max-width:44rem">
      <h3 style="margin-top:0">Create custom role</h3>
      <div class="form-group">
        <label for="custom-role-name">Name</label>
        <input type="text" id="custom-role-name" placeholder="e.g. Label lead">
      </div>
      <div class="form-group">
        <label for="custom-role-slug">Slug <span class="muted">(optional)</span></label>
        <input type="text" id="custom-role-slug" placeholder="auto from name">
      </div>
      <div class="form-group">
        <label for="custom-role-desc">Description</label>
        <input type="text" id="custom-role-desc" placeholder="Optional">
      </div>
      <fieldset class="form-group" style="border:none;padding:0;margin:0 0 .75rem">
        <legend style="font-size:.85rem;font-weight:600;margin-bottom:.4rem">Capabilities</legend>
        <div id="custom-role-caps" class="cap-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.35rem"></div>
      </fieldset>
      <button type="button" class="btn btn-primary" id="create-custom-role">Create role</button>
      <p id="custom-role-msg" class="field-hint" style="min-height:1.2em"></p>
    </div>
    {% endif %}

    <h3 style="font-size:1rem">Custom roles</h3>
    <ul class="version-list" id="custom-roles-list"><li class="muted">Loading…</li></ul>

    <h3 style="font-size:1rem;margin-top:1.5rem">Built-in roles</h3>
    <div class="table-wrap" style="overflow:auto">
      <table class="data-table" id="roles-table">
        <thead><tr><th>Role</th><th>Capabilities</th></tr></thead>
        <tbody><tr><td colspan="2" class="muted">Loading…</td></tr></tbody>
      </table>
    </div>
  </section>
</div>

<dialog class="oo-dialog" id="create-workspace-dialog">
  <form method="dialog" id="create-workspace-form" class="form-card" style="margin:0;min-width:min(100%,22rem)">
    <h3 style="margin-top:0">New workspace</h3>
    <div class="form-group">
      <label for="ws-name">Name</label>
      <input type="text" id="ws-name" required placeholder="e.g. Vision team">
    </div>
    <div class="form-group">
      <label for="ws-slug">Slug <span class="muted">(optional)</span></label>
      <input type="text" id="ws-slug" placeholder="auto from name">
    </div>
    <p id="ws-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="ws-create-cancel">Cancel</button>
      <button type="submit" class="btn btn-primary">Create workspace</button>
    </div>
  </form>
</dialog>
{% endblock %}
{% block scripts %}
<script>
  window.__ORG_ID__ = {{ org.id }};
  window.__ORG_LABEL__ = {{ org_entity_label|tojson }};
  window.__MANAGEMENT_ENABLED__ = {{ management_enabled|tojson }};
</script>
<script src="/static/js/org_mgmt.js"></script>
{% endblock %}