{% extends "base.html" %}
{% block title %}LASSO — Profile: {{ profile.name }}{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item">
    <a href="{{ url_for('dashboard.profiles_list') }}">Profiles</a>
</li>
<li><span class="breadcrumb-separator" aria-hidden="true">/</span></li>
<li class="breadcrumb-item">
    <span class="breadcrumb-current">{{ profile.name }}</span>
</li>
{% endblock %}

{% block content %}
<!-- Profile Header -->
<div class="card mb-6">
    <div class="card-header">
        <h3>
            {{ profile.name }}
            <span class="badge badge-{{ source }}" style="margin-left: var(--sp-2);">{{ source }}</span>
        </h3>
    </div>
    <div class="card-body">
        {% if profile.description %}
        <p class="text-secondary mb-4" style="line-height: 1.6;">{{ profile.description }}</p>
        {% endif %}

        {% if profile.tags %}
        <div class="mb-4">
            {% for tag in profile.tags %}
            <span class="tag">{{ tag }}</span>
            {% endfor %}
        </div>
        {% endif %}

        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Config Hash</div>
                <div class="detail-value mono">{{ profile.config_hash()[:16] }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Version</div>
                <div class="detail-value">{{ profile.version }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Created</div>
                <div class="detail-value">{{ profile.created_at | timeago }}</div>
            </div>
        </div>
    </div>
</div>

<!-- Tabbed Sections -->
<div class="card">
    <div class="tabs" role="tablist" aria-label="Profile configuration sections">
        <button class="tab active" role="tab" aria-selected="true" aria-controls="panel-filesystem" id="tab-filesystem" onclick="switchTab('filesystem')">Filesystem</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-commands" id="tab-commands" onclick="switchTab('commands')">Commands</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-network" id="tab-network" onclick="switchTab('network')">Network</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-resources" id="tab-resources" onclick="switchTab('resources')">Resources</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-guardrails" id="tab-guardrails" onclick="switchTab('guardrails')">Guardrails</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-audit" id="tab-audit" onclick="switchTab('audit')">Audit</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-raw" id="tab-raw" onclick="switchTab('raw')">Raw JSON</button>
    </div>

    <!-- Filesystem Panel -->
    <div class="tab-panel active card-body" role="tabpanel" id="panel-filesystem" aria-labelledby="tab-filesystem">
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Working Directory</div>
                <div class="detail-value mono">{{ profile_data.filesystem.working_dir }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Max Disk</div>
                <div class="detail-value">{{ profile_data.filesystem.max_disk_mb }}MB</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Temp Dir Size</div>
                <div class="detail-value">{{ profile_data.filesystem.temp_dir_mb }}MB</div>
            </div>
        </div>

        <details class="collapsible">
            <summary>Read-Only Paths ({{ profile_data.filesystem.read_only_paths | length }})</summary>
            <div class="collapsible-content">
                <ul>
                    {% for path in profile_data.filesystem.read_only_paths %}
                    <li>{{ path }}</li>
                    {% endfor %}
                </ul>
            </div>
        </details>

        <details class="collapsible" style="border-top: none; margin-top: var(--sp-2); padding-top: 0;">
            <summary>Hidden Paths ({{ profile_data.filesystem.hidden_paths | length }})</summary>
            <div class="collapsible-content">
                <ul>
                    {% for path in profile_data.filesystem.hidden_paths %}
                    <li>{{ path }}</li>
                    {% endfor %}
                </ul>
            </div>
        </details>
    </div>

    <!-- Commands Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-commands" aria-labelledby="tab-commands">
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Mode</div>
                <div class="detail-value font-semibold">{{ profile_data.commands.mode }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Shell Operators</div>
                <div class="detail-value">
                    {% if profile_data.commands.allow_shell_operators %}
                    <span class="text-warning font-semibold">Allowed</span>
                    {% else %}
                    <span class="text-success font-semibold">Blocked</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Max Execution</div>
                <div class="detail-value">{{ profile_data.commands.max_execution_seconds }}s</div>
            </div>
        </div>

        {% if profile_data.commands.mode == 'whitelist' %}
        <details class="collapsible" open>
            <summary>Whitelisted Commands ({{ profile_data.commands.whitelist | length }})</summary>
            <div class="collapsible-content">
                <div class="cmd-list">
                    {% for cmd in profile_data.commands.whitelist | sort %}
                    <span class="cmd-tag">{{ cmd }}</span>
                    {% endfor %}
                </div>
            </div>
        </details>
        {% endif %}

        {% if profile_data.commands.blocked_args %}
        <details class="collapsible" style="border-top: none; margin-top: var(--sp-2); padding-top: 0;">
            <summary>Blocked Argument Patterns</summary>
            <div class="collapsible-content">
                {% for cmd, patterns in profile_data.commands.blocked_args.items() %}
                <div class="mb-2">
                    <code>{{ cmd }}</code>:
                    {% for pattern in patterns %}
                    <span class="cmd-tag blocked">{{ pattern }}</span>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
        </details>
        {% endif %}
    </div>

    <!-- Network Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-network" aria-labelledby="tab-network">
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Mode</div>
                <div class="detail-value">
                    {% if profile_data.network.mode == 'none' %}
                    <span class="text-success font-semibold">Isolated (none)</span>
                    {% elif profile_data.network.mode == 'restricted' %}
                    <span class="text-warning font-semibold">Restricted</span>
                    {% else %}
                    <span class="text-error font-semibold">Full (unrestricted)</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Proxy</div>
                <div class="detail-value">{{ "Enabled" if profile_data.network.enable_proxy else "Disabled" }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">DNS Servers</div>
                <div class="detail-value mono">{{ profile_data.network.dns_servers | join(', ') }}</div>
            </div>
        </div>

        {% if profile_data.network.allowed_domains %}
        <details class="collapsible">
            <summary>Allowed Domains ({{ profile_data.network.allowed_domains | length }})</summary>
            <div class="collapsible-content">
                <ul>
                    {% for domain in profile_data.network.allowed_domains %}
                    <li>{{ domain }}</li>
                    {% endfor %}
                </ul>
            </div>
        </details>
        {% endif %}

        {% if profile_data.network.allowed_ports %}
        <details class="collapsible" style="border-top: none; margin-top: var(--sp-2); padding-top: 0;">
            <summary>Allowed Ports</summary>
            <div class="collapsible-content">
                <div class="text-mono text-sm text-secondary">
                    {{ profile_data.network.allowed_ports | join(', ') }}
                </div>
            </div>
        </details>
        {% endif %}

        {% if profile_data.network.blocked_cidrs %}
        <details class="collapsible" style="border-top: none; margin-top: var(--sp-2); padding-top: 0;">
            <summary>Blocked CIDRs ({{ profile_data.network.blocked_cidrs | length }})</summary>
            <div class="collapsible-content">
                <ul>
                    {% for cidr in profile_data.network.blocked_cidrs %}
                    <li>{{ cidr }}</li>
                    {% endfor %}
                </ul>
            </div>
        </details>
        {% endif %}
    </div>

    <!-- Resources Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-resources" aria-labelledby="tab-resources">
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Memory</div>
                <div class="detail-value font-bold">{{ profile_data.resources.max_memory_mb }}MB</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">CPU</div>
                <div class="detail-value font-bold">{{ profile_data.resources.max_cpu_percent }}%</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Max PIDs</div>
                <div class="detail-value">{{ profile_data.resources.max_pids }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Open Files</div>
                <div class="detail-value">{{ profile_data.resources.max_open_files }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Max File Size</div>
                <div class="detail-value">{{ profile_data.resources.max_file_size_mb }}MB</div>
            </div>
        </div>
    </div>

    <!-- Guardrails Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-guardrails" aria-labelledby="tab-guardrails">
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Enforcement</div>
                <div class="detail-value">
                    {% if profile_data.guardrails.enforce %}
                    <span class="text-success font-semibold">Active</span>
                    {% else %}
                    <span class="text-warning font-semibold">Observe only</span>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if profile_data.guardrails.rules %}
        <div class="table-wrapper">
            <table class="data-table" role="table" aria-label="Guardrail rules">
                <thead>
                    <tr>
                        <th scope="col">Rule ID</th>
                        <th scope="col">Description</th>
                        <th scope="col">Severity</th>
                        <th scope="col">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for rule in profile_data.guardrails.rules %}
                    <tr>
                        <td class="table-cell-mono">{{ rule.id }}</td>
                        <td>{{ rule.description }}</td>
                        <td>
                            <span class="badge {% if rule.severity == 'critical' %}badge-error{% elif rule.severity == 'error' %}badge-paused{% else %}badge-created{% endif %}">
                                {{ rule.severity }}
                            </span>
                        </td>
                        <td>
                            {% if rule.enabled %}
                            <span class="text-success font-semibold">Enabled</span>
                            {% else %}
                            <span class="text-muted">Disabled</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-muted text-sm">No guardrail rules configured.</p>
        {% endif %}
    </div>

    <!-- Audit Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-audit" aria-labelledby="tab-audit">
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Enabled</div>
                <div class="detail-value">
                    {% if profile_data.audit.enabled %}
                    <span class="text-success font-semibold">Yes</span>
                    {% else %}
                    <span class="text-error font-semibold">No</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Log Format</div>
                <div class="detail-value">{{ profile_data.audit.log_format }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Sign Entries</div>
                <div class="detail-value">
                    {% if profile_data.audit.sign_entries %}
                    <span class="text-success">Yes (HMAC)</span>
                    {% else %}
                    <span class="text-muted">No</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Command Output</div>
                <div class="detail-value">{{ "Logged" if profile_data.audit.include_command_output else "Not logged" }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">File Diffs</div>
                <div class="detail-value">{{ "Logged" if profile_data.audit.include_file_diffs else "Not logged" }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Max Log Size</div>
                <div class="detail-value">{{ profile_data.audit.max_log_size_mb }}MB</div>
            </div>
        </div>
    </div>

    <!-- Raw JSON Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-raw" aria-labelledby="tab-raw">
        <div class="config-block" role="region" aria-label="Raw profile JSON">{{ profile_json }}</div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function switchTab(name) {
    // Deactivate all tabs
    document.querySelectorAll('.tab').forEach(function(t) {
        t.classList.remove('active');
        t.setAttribute('aria-selected', 'false');
    });
    document.querySelectorAll('.tab-panel').forEach(function(p) {
        p.classList.remove('active');
    });

    // Activate selected
    document.getElementById('tab-' + name).classList.add('active');
    document.getElementById('tab-' + name).setAttribute('aria-selected', 'true');
    document.getElementById('panel-' + name).classList.add('active');
}

// Keyboard navigation for tabs
document.querySelectorAll('.tab').forEach(function(tab) {
    tab.addEventListener('keydown', function(e) {
        var tabs = Array.from(document.querySelectorAll('.tab'));
        var idx = tabs.indexOf(e.target);
        if (e.key === 'ArrowRight' && idx < tabs.length - 1) {
            tabs[idx + 1].focus();
            tabs[idx + 1].click();
        } else if (e.key === 'ArrowLeft' && idx > 0) {
            tabs[idx - 1].focus();
            tabs[idx - 1].click();
        }
    });
});
</script>
{% endblock %}