{% 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" style="display: flex; align-items: center; justify-content: space-between;">
        <h3>
            {{ profile.name }}
            <span class="badge badge-{{ source }}" style="margin-left: var(--sp-2);">{{ source }}</span>
        </h3>
        {% if source == 'saved' %}
        <a href="{{ url_for('dashboard.profile_edit', name=profile.name) }}" class="btn btn-sm btn-primary">Edit</a>
        {% elif source == 'builtin' %}
        <a href="{{ url_for('dashboard.profile_edit', name=profile.name) }}" class="btn btn-sm btn-secondary">Duplicate & Edit</a>
        {% endif %}
    </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-allowed" id="tab-allowed" onclick="switchTab('allowed')">Allowed Actions</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-restrictions" id="tab-restrictions" onclick="switchTab('restrictions')">Restrictions</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="panel-audit" id="tab-audit" onclick="switchTab('audit')">Audit Settings</button>
    </div>

    <!-- Allowed Actions Panel -->
    <div class="tab-panel active card-body" role="tabpanel" id="panel-allowed" aria-labelledby="tab-allowed">
        <p class="text-secondary text-sm mb-4">What the AI agent is permitted to do inside this sandbox.</p>

        <h3 style="font-size: var(--text-md); margin-bottom: var(--sp-3); color: var(--text-secondary);">Commands</h3>
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Command filter</div>
                <div class="detail-value font-semibold">{% if profile_data.commands.mode == 'whitelist' %}Allowed list only{% elif profile_data.commands.mode == 'blacklist' %}Blocked list{% else %}{{ profile_data.commands.mode }}{% endif %}</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 time</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>Allowed commands ({{ profile_data.commands.whitelist | length }}) &mdash; only these can run</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.guardrails.rules %}
        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Safety Rules</h3>
        <p class="text-muted text-sm mb-4">
            {% if profile_data.guardrails.enforce %}
            These rules are <strong class="text-success">actively enforced</strong> &mdash; violations are blocked.
            {% else %}
            These rules are in <strong class="text-warning">observe-only mode</strong> &mdash; violations are logged but not blocked.
            {% endif %}
        </p>
        <div class="table-wrapper">
            <table class="data-table" role="table" aria-label="Safety rules">
                <thead>
                    <tr>
                        <th scope="col">Rule</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">Active</span>
                            {% else %}
                            <span class="text-muted">Off</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Filesystem</h3>
        <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">Disk limit</div>
                <div class="detail-value">{{ profile_data.filesystem.max_disk_mb }}MB</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Temp directory 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>

        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Network</h3>
        <div class="detail-grid mb-4">
            <div class="detail-item">
                <div class="detail-label">Internet access</div>
                <div class="detail-value">
                    {% if profile_data.network.mode == 'none' %}
                    <span class="text-success font-semibold">Offline (fully isolated)</span>
                    {% elif profile_data.network.mode == 'restricted' %}
                    <span class="text-warning font-semibold">Limited (specific domains only)</span>
                    {% else %}
                    <span class="text-error font-semibold">Unrestricted</span>
                    {% endif %}
                </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 %}
    </div>

    <!-- Restrictions Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-restrictions" aria-labelledby="tab-restrictions">
        <p class="text-secondary text-sm mb-4">Limits on what the sandbox can consume or access. These prevent runaway processes and protect your system.</p>

        <h3 style="font-size: var(--text-md); margin-bottom: var(--sp-3); color: var(--text-secondary);">Resource Limits</h3>
        <div class="detail-grid mb-4">
            <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 processes</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>

        {% if profile_data.commands.blocked_args %}
        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Blocked Argument Patterns</h3>
        <p class="text-muted text-sm mb-4">Even for allowed commands, these specific flags and arguments are never permitted.</p>
        {% 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 %}
        {% endif %}

        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Hidden Paths</h3>
        <p class="text-muted text-sm mb-4">These filesystem paths are invisible to the sandbox. The AI cannot read or discover them.</p>
        {% if profile_data.filesystem.hidden_paths %}
        <ul>
            {% for path in profile_data.filesystem.hidden_paths %}
            <li>{{ path }}</li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="text-muted text-sm">No hidden paths configured.</p>
        {% endif %}

        {% if profile_data.network.blocked_cidrs %}
        <h3 style="font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-3); color: var(--text-secondary);">Blocked Network Ranges</h3>
        <ul>
            {% for cidr in profile_data.network.blocked_cidrs %}
            <li>{{ cidr }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>

    <!-- Audit Settings Panel -->
    <div class="tab-panel card-body" role="tabpanel" id="panel-audit" aria-labelledby="tab-audit">
        <p class="text-secondary text-sm mb-4">Every action inside the sandbox is recorded so you can review what the AI did. These settings control how detailed that recording is.</p>

        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Activity recording</div>
                <div class="detail-value">
                    {% if profile_data.audit.enabled %}
                    <span class="text-success font-semibold">Enabled</span>
                    {% else %}
                    <span class="text-error font-semibold">Disabled</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">Tamper-proof signatures</div>
                <div class="detail-value">
                    {% if profile_data.audit.sign_entries %}
                    <span class="text-success">Enabled &mdash; entries are cryptographically signed to detect tampering</span>
                    {% else %}
                    <span class="text-muted">Disabled</span>
                    {% endif %}
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Record command output</div>
                <div class="detail-value">{{ "Yes &mdash; full output of each command is saved" if profile_data.audit.include_command_output else "No &mdash; only the command itself is logged" }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Record file changes</div>
                <div class="detail-value">{{ "Yes &mdash; diffs of changed files are saved" if profile_data.audit.include_file_diffs else "No" }}</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>
</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 %}