{% extends "django_spicedb/base.html" %}
{% block title %}{{ node.name }} - {{ tenant.name }}{% endblock %}

{% block content %}
<div class="breadcrumb">
    <a href="{% url 'rebac:hierarchy_tree' tenant_pk=tenant.pk %}">Hierarchy</a>
    <span>/</span>
    {% for ancestor in node.get_ancestors %}
        <a href="{% url 'rebac:node_detail' tenant_pk=tenant.pk node_pk=ancestor.pk %}">{{ ancestor.name }}</a>
        <span>/</span>
    {% endfor %}
    <span>{{ node.name }}</span>
</div>

<div class="card">
    <div class="card-header">
        <div>
            <h1>{{ node.name }}</h1>
            <p style="color: var(--text-muted); font-size: 0.875rem;">{{ node.hierarchy_type.display_name }}</p>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
        <div><strong>Type:</strong> {{ node.hierarchy_type.display_name }}</div>
        <div><strong>Depth:</strong> {{ node.depth }}</div>
        {% if node.slug %}<div><strong>Slug:</strong> {{ node.slug }}</div>{% endif %}
        {% if node.code %}<div><strong>Code:</strong> {{ node.code }}</div>{% endif %}
    </div>
</div>

<!-- Role Assignments - HTMX powered -->
<div class="card">
    <div class="card-header">
        <h2>Role Assignments</h2>
        {% if can_manage %}
        <button class="btn btn-primary"
                onclick="document.getElementById('add-role-form').style.display = document.getElementById('add-role-form').style.display === 'none' ? 'block' : 'none'">
            + Add Role
        </button>
        {% endif %}
    </div>

    {% if can_manage %}
    <!-- Inline Add Role Form -->
    <div id="add-role-form" style="display: none; margin-bottom: 1.5rem; padding: 1rem; background: var(--bg); border-radius: 6px;">
        <form hx-post="{% url 'rebac:assign_role' tenant_pk=tenant.pk node_pk=node.pk %}"
              hx-target="#roles-list"
              hx-swap="innerHTML"
              hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('add-role-form').style.display='none'; RebacUI.showToast('Role assigned successfully'); }">
            {% csrf_token %}
            <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end;">
                <div class="form-group" style="margin: 0;">
                    <label for="user_id">User</label>
                    <select name="user_id" id="user_id" class="form-control" required>
                        <option value="">Select user...</option>
                        {% for user in available_users %}
                        <option value="{{ user.pk }}">{{ user.username }} ({{ user.email }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" style="margin: 0;">
                    <label for="role">Role</label>
                    <select name="role" id="role" class="form-control" required>
                        <option value="">Select role...</option>
                        <option value="owner">Owner</option>
                        <option value="manager">Manager</option>
                        <option value="viewer">Viewer</option>
                        <option value="admin">Admin</option>
                        <option value="lead">Lead</option>
                        <option value="member">Member</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="htmx-indicator spinner"></span>
                    Assign
                </button>
            </div>
        </form>
    </div>
    {% endif %}

    <!-- Roles List (HTMX target) -->
    <div id="roles-list"
         hx-get="{% url 'rebac:partial_node_roles' tenant_pk=tenant.pk node_pk=node.pk %}"
         hx-trigger="load">
        <div style="text-align: center; padding: 2rem;">
            <div class="spinner" style="margin: 0 auto;"></div>
            <p style="color: var(--text-muted); margin-top: 0.5rem;">Loading roles...</p>
        </div>
    </div>
</div>

<!-- Child Nodes -->
{% if children %}
<div class="card">
    <div class="card-header">
        <h2>Child Nodes</h2>
    </div>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for child in children %}
            <tr>
                <td>
                    <a href="{% url 'rebac:node_detail' tenant_pk=tenant.pk node_pk=child.pk %}"
                       hx-get="{% url 'rebac:node_detail' tenant_pk=tenant.pk node_pk=child.pk %}"
                       hx-push-url="true"
                       hx-target="body">
                        {{ child.name }}
                    </a>
                </td>
                <td>{{ child.hierarchy_type.display_name }}</td>
                <td>
                    <a href="{% url 'rebac:node_detail' tenant_pk=tenant.pk node_pk=child.pk %}"
                       class="btn btn-secondary btn-sm">View</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}