{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Internal Operations - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Internal Operations</h1>
            <div class="ops-subtitle">
                Support, deployment, customer success, growth, and business operations structure for future teams.
            </div>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Create Task</h2>
        <form class="ops-form-grid" method="post" action="/internal-operations/tasks">
            <label>
                Area
                <select name="area">
                    {% for area in snapshot.areas %}
                        <option value="{{ area }}">{{ area|replace('_',' ')|title }}</option>
                    {% endfor %}
                </select>
            </label>
            <label>Title<input name="title"></label>
            <label>
                Priority
                <select name="priority">
                    <option value="normal">Normal</option>
                    <option value="high">High</option>
                    <option value="critical">Critical</option>
                </select>
            </label>
            <label>Assigned To<input name="assigned_to"></label>
            <button type="submit">Create</button>
        </form>
    </section>

    <section class="ops-grid">
        <div class="ops-panel">
            <h2>Roles</h2>
            <div class="ops-list">
                {% for role in snapshot.roles %}
                    <div class="ops-list-item">
                        <strong>{{ role.role_name }}</strong>
                        <p>{{ role.area|replace('_',' ')|title }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="ops-panel">
            <h2>Tasks</h2>
            <div class="ops-list">
                {% for task in snapshot.tasks %}
                    <div class="ops-list-item">
                        <strong>{{ task.title }}</strong>
                        <p>{{ task.area }} / {{ task.priority }} / {{ task.status }}</p>
                    </div>
                {% else %}
                    <div class="ops-list-item">No internal tasks yet.</div>
                {% endfor %}
            </div>
        </div>
    </section>
</main>
{% endblock %}