{% extends "base.html" %}

{% block title %}Settings – {{ project.name }}{% endblock %}

{% block content %}
<!-- Consistent Project Navigation -->
{% include "_project_subnav.html" %}

<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h2 style="margin:0;font-size:1.5rem;font-weight:800;">{{ project.name }} — Settings</h2>
    <p class="text-secondary" style="font-size:0.9rem;margin:0.25rem 0 0 0;">Project workspace folder, agent role assignments, and project management</p>
  </div>
</div>

<!-- Section 1: General & Folder -->
<div class="card glass-card mb-4" style="padding: 1.5rem;">
  <h3 style="margin:0 0 1rem 0; font-size:1.2rem; font-weight:700;">Project Details</h3>
  <form id="settings-project-form" onsubmit="event.preventDefault(); saveProjectSettings();">
    <div class="form-group mb-3">
      <label for="settings-name" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Project Name</label>
      <input type="text" id="settings-name" class="form-input" style="width:100%; max-width:500px;" value="{{ project.name }}" required>
    </div>
    <div class="form-group mb-3">
      <label for="settings-desc" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Description</label>
      <textarea id="settings-desc" class="form-input" rows="3" style="width:100%; max-width:500px;">{{ project.description or '' }}</textarea>
    </div>
    <div class="form-group mb-3">
      <label for="settings-path" style="font-weight:600; font-size:0.85rem; display:block; margin-bottom:0.4rem;">Workspace Folder</label>
      <div style="display:flex; gap:0.5rem; max-width:500px;">
        <input type="text" id="settings-path" class="form-input" style="flex:1;" value="{{ project.path or '' }}" placeholder="No folder selected">
        <button type="button" class="btn btn-secondary" onclick="openFolderPicker('settings-path')">Browse</button>
      </div>
      <small class="text-secondary d-block mt-1">Directory where agent CLIs and Git worktrees run.</small>
    </div>
    <div class="d-flex gap-2 align-items-center">
      <button type="submit" class="btn btn-primary" id="save-settings-btn">Save changes</button>
      <span id="settings-feedback" class="text-success" style="display:none; font-size:0.85rem;">Saved!</span>
    </div>
  </form>
</div>

<!-- Section 2: Workflow and global role summary -->
<div class="card glass-card mb-4" style="padding: 1.5rem;">
  <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
    <div>
      <h3 style="margin:0; font-size:1.2rem; font-weight:700;">Workflow &amp; Global Roles</h3>
      <p class="text-secondary" style="font-size:0.85rem; margin:0.25rem 0 0 0;">
        Role assignments apply to every project. Manage them from one global page.
      </p>
    </div>
    <a class="btn btn-secondary btn-sm"
      href="/ui/users?focus=worker&amp;return=/ui/projects/{{ project.id }}/settings">Manage global roles</a>
  </div>
  <div class="settings-policy-summary">
    <div>
      <strong>Done policy</strong>
      <span>Merged GitHub pull request at the reviewed implementation revision</span>
    </div>
    <div>
      <strong>Review roles</strong>
      <span>Test, diff review, and Git/PR</span>
    </div>
  </div>
  <div class="settings-role-summary" aria-label="Configured global roles">
    {% for role in role_data.roles %}
    <span class="badge" title="{{ role.display_name }} · {{ role.command }}">
      {{ role.role }}: {{ role.display_name }}
    </span>
    {% else %}
    <span class="text-secondary">No global roles are configured.</span>
    {% endfor %}
  </div>
</div>

<!-- Section 3: Danger Zone -->
<div class="card glass-card" style="padding: 1.5rem; border-color: rgba(var(--danger-rgb, 239, 68, 68), 0.3);">
  <h3 style="margin:0 0 0.5rem 0; font-size:1.1rem; font-weight:700; color:var(--danger);">Danger Zone</h3>
  <p class="text-secondary" style="font-size:0.85rem; margin-bottom:1rem;">Deleting a project permanently deletes its board stages, task history, and sessions.</p>
  <button class="btn btn-danger btn-sm" onclick="deleteThisProject()">Delete project</button>
</div>

{% set folder_picker_title = 'Select Folder' %}
{% include "_folder_picker.html" %}

<div id="toast" class="toast" style="display:none;" role="status" aria-live="polite" aria-atomic="true"></div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/folder-picker.js?v=7"></script>
<script>
window.PROJECT_ID = {{ project.id }};
window.CURRENT_ENTITY_ID = {{ (current_entity.id if current_entity else 'null') }};
</script>
<script src="/static/js/project-settings.js?v=7"></script>
{% endblock %}