{% extends "console/layout.html" %}
{% block content %}
<section class="vyuh-console-screen">
<header class="vyuh-console-topbar">
<div>
<h1>Operations</h1>
<p>Snapshot of registered request and execution paths</p>
</div>
<div class="vyuh-console-actions">
<a class="vyuh-console-icon-button" href="{{ base_path }}/operations" aria-label="Refresh"><svg><use href="#vyuh-icon-refresh"></use></svg></a>
<label class="vyuh-console-select"><span>Auto refresh</span><select><option>Off</option><option>30s</option></select></label>
</div>
</header>
<div class="vyuh-console-stat-grid is-five">
<article class="vyuh-console-stat"><span class="vyuh-console-icon is-ember"><svg><use href="#vyuh-icon-pulse"></use></svg></span><div><h3>Total Operations</h3><strong>{{ page.items | length }}</strong><p>Current page</p></div></article>
<article class="vyuh-console-stat"><span class="vyuh-console-icon is-green"><svg><use href="#vyuh-icon-check"></use></svg></span><div><h3>Visible</h3><strong>{{ page.items | length }}</strong><p>Current result set</p></div></article>
<article class="vyuh-console-stat"><span class="vyuh-console-icon is-yellow"><svg><use href="#vyuh-icon-clock"></use></svg></span><div><h3>Filtered</h3><strong>{% if query.kind %}1{% else %}All{% endif %}</strong><p>Kind filter</p></div></article>
<article class="vyuh-console-stat"><span class="vyuh-console-icon is-violet"><svg><use href="#vyuh-icon-docs"></use></svg></span><div><h3>Schema</h3><strong>OpenAPI</strong><p>Request/response metadata</p></div></article>
<article class="vyuh-console-stat"><span class="vyuh-console-icon is-blue"><svg><use href="#vyuh-icon-gear"></use></svg></span><div><h3>Hidden</h3><strong>No</strong><p>Console paths omitted</p></div></article>
</div>
<form class="vyuh-console-toolbar" method="get" action="{{ base_path }}/operations">
<label><svg><use href="#vyuh-icon-search"></use></svg><input type="search" name="q" placeholder="Search by path, method, or operation..." value="{% if query.q %}{{ query.q }}{% endif %}"></label>
<select name="kind">
<option value="">All Kinds</option>
{% for kind in kinds %}
<option value="{{ kind }}" {% if query.kind == kind %}selected{% endif %}>{{ kind }}</option>
{% endfor %}
</select>
<input type="search" name="owner" placeholder="Owner" value="{% if query.owner %}{{ query.owner }}{% endif %}">
<input type="search" name="tag" placeholder="Tag" value="{% if query.tag %}{{ query.tag }}{% endif %}">
<button type="submit"><svg><use href="#vyuh-icon-search"></use></svg>Filter</button>
<a class="vyuh-console-reset" href="{{ base_path }}/operations"><svg><use href="#vyuh-icon-refresh"></use></svg>Reset</a>
</form>
<div class="vyuh-console-data-grid">
<article class="vyuh-console-card">
<header><h2>Recent Operations</h2></header>
<div class="vyuh-console-table">
<table>
<thead><tr><th>Kind</th><th>Name</th><th>Methods</th><th>Path</th><th>Owner</th><th>Hidden</th><th></th></tr></thead>
<tbody>
{% for op in page.items %}
<tr {% if selected_operation and selected_operation.id == op.id %}aria-selected="true"{% endif %}>
<td><span class="vyuh-console-badge is-info">{{ op.kind }}</span></td>
<td><a class="vyuh-console-row-title" href="{{ base_path }}/operations?selected={{ op.id }}">{% if op.summary %}{{ op.summary }}{% else %}{{ op.name }}{% endif %}</a></td>
<td>{% for method in op.methods %}<span class="vyuh-console-badge is-method">{{ method }}</span>{% endfor %}</td>
<td><code>{{ op.path }}</code></td>
<td>{% if op.owner %}{{ op.owner }}{% else %}-{% endif %}</td>
<td>{{ op.hidden }}</td>
<td><a href="{{ base_path }}/operations?selected={{ op.id }}">›</a></td>
</tr>
{% else %}
<tr><td colspan="7"><div class="vyuh-console-empty"><strong>No operations match this filter.</strong><span>Clear the search or choose another operation kind.</span></div></td></tr>
{% endfor %}
</tbody>
</table>
</div>
<footer class="vyuh-console-pagination">
<span>Showing {{ page.items | length }} operation records</span>
<nav>{% if page.next_cursor %}<a href="{{ base_path }}/operations?cursor={{ page.next_cursor }}">Next</a>{% endif %}</nav>
</footer>
</article>
<aside class="vyuh-console-inspector">
{% if selected_operation %}
<header><h2>Operation Details</h2><a href="{{ base_path }}/operations" aria-label="Close"><svg><use href="#vyuh-icon-x"></use></svg></a></header>
<span class="vyuh-console-badge is-info">{{ selected_operation.kind }}</span>
<h3>{{ selected_operation.name }}</h3>
<p>{% if selected_operation.description %}{{ selected_operation.description }}{% elif selected_operation.summary %}{{ selected_operation.summary }}{% else %}No description registered.{% endif %}</p>
<dl class="vyuh-console-kv">
<div><dt>ID</dt><dd>{{ selected_operation.id }}</dd></div>
<div><dt>Path</dt><dd>{{ selected_operation.path }}</dd></div>
<div><dt>Methods</dt><dd>{{ selected_operation.methods | join(", ") }}</dd></div>
<div><dt>Owner</dt><dd>{% if selected_operation.owner %}{{ selected_operation.owner }}{% else %}-{% endif %}</dd></div>
<div><dt>Hidden</dt><dd>{{ selected_operation.hidden }}</dd></div>
</dl>
<nav class="vyuh-console-tabs is-compact" role="tablist" data-console-tabs aria-label="Operation detail sections">
<button type="button" role="tab" id="operation-request-tab" aria-controls="operation-request-panel" aria-selected="true">Request</button>
<button type="button" role="tab" id="operation-response-tab" aria-controls="operation-response-panel" aria-selected="false" tabindex="-1">Response</button>
<button type="button" role="tab" id="operation-metadata-tab" aria-controls="operation-metadata-panel" aria-selected="false" tabindex="-1">Metadata</button>
</nav>
<section class="vyuh-console-tab-panel" role="tabpanel" id="operation-request-panel" aria-labelledby="operation-request-tab">
{% for arg in selected_operation.args %}
{% include "console/partials/schema_card.html" %}
{% else %}
<article class="vyuh-console-muted-panel"><strong>Request</strong><code>No request inputs registered.</code></article>
{% endfor %}
</section>
<section class="vyuh-console-tab-panel" role="tabpanel" id="operation-response-panel" aria-labelledby="operation-response-tab" hidden>
{% for ret in selected_operation.returns %}
{% set arg = ret %}
{% include "console/partials/schema_card.html" %}
{% else %}
<article class="vyuh-console-muted-panel"><strong>Response</strong><code>No response schema registered.</code></article>
{% endfor %}
</section>
<section class="vyuh-console-tab-panel" role="tabpanel" id="operation-metadata-panel" aria-labelledby="operation-metadata-tab" hidden>
<dl class="vyuh-console-kv">
<div><dt>Registered As</dt><dd>{{ selected_operation.name }}</dd></div>
<div><dt>Kind</dt><dd>{{ selected_operation.kind }}</dd></div>
<div><dt>Route</dt><dd>{{ selected_operation.path }}</dd></div>
<div><dt>Tags</dt><dd>{% if selected_operation.tags %}{{ selected_operation.tags | join(", ") }}{% else %}-{% endif %}</dd></div>
</dl>
</section>
{% else %}
<header><h2>Operation Details</h2></header>
<p>Select an operation row to inspect request and response schema details without leaving this page.</p>
{% endif %}
</aside>
</div>
</section>
{% endblock %}