{% extends "base.html" %}
{% block title %}Starred Jobs - circus{% endblock %}
{% block auth %}
    {% if !auth_name.is_empty() %}
        <span class="auth-user">{{ auth_name }}</span>
        <form method="POST" action="/logout">
            <button class="btn-ghost" type="submit">Logout</button>
        </form>
    {% else %}
        <a class="btn btn-secondary" href="/login">Login</a>
    {% endif %}
{% endblock %}
{% block breadcrumbs %}
    <nav class="breadcrumbs">
        <a href="/">Home</a>
        <span class="sep">/</span>
        <span class="current">Starred</span>
    </nav>
{% endblock %}
{% block content %}
    <h1>Starred Jobs</h1>

    {% if !is_logged_in %}
        <div class="empty">
            <div class="empty-title">Login required</div>
            <div class="empty-hint">
                Please
                <a href="/login">login</a>
                to view your starred jobs.
            </div>
        </div>
    {% else %}
        {% if starred_jobs.is_empty() %}
            <div class="empty">
                <div class="empty-title">No starred jobs</div>
                <div class="empty-hint">Star jobs from project or build pages to track them here.</div>
            </div>
        {% else %}
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Project</th>
                            <th>Jobset</th>
                            <th>Job Name</th>
                            <th>Latest Status</th>
                            <th class="row-actions">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for s in starred_jobs %}
                            <tr>
                                <td>
                                    <a href="/project/{{ s.project_id }}">{{ s.project_name }}</a>
                                </td>
                                <td>
                                    {% if let Some(id) = s.jobset_id %}
                                        <a href="/jobset/{{ id }}">{{ s.jobset_name }}</a>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>{{ s.job_name }}</td>
                                <td>
                                    <span class="badge badge-{{ s.status_class }}">{{ s.status_text }}</span>
                                </td>
                                <td class="row-actions">
                                    <button type="button"
                                            class="btn btn-small btn-secondary"
                                            onclick="unstar('{{ s.id }}')">
                                        Unstar
                                    </button>
                                    {% if let Some(id) = s.latest_build_id %}
                                        <a href="/build/{{ id }}" class="btn btn-small btn-secondary">View Build</a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}
{% block scripts %}
    <script>
const CSRF_TOKEN = '{{ csrf_token }}';
async function unstar(id) {
if (!confirm('Remove this job from your starred list?')) return;
try {
const res = await fetch('/api/v1/me/starred-jobs/' + id, { method: 'DELETE', headers: {'x-csrf-token': CSRF_TOKEN} });
if (!res.ok) {
const err = await res.json().catch(() => ({ error: res.statusText }));
throw new Error(err.error || err.message || 'Failed to unstar');
}
window.location.reload();
} catch(err) {
alert(err.message);
}
}
    </script>
{% endblock %}
