{% extends "dashboard/base.html" %}

{% block title %}Coaching - Command Center{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Coaching Sessions</h1>
        <p class="page-description">Track coaching progress and key takeaways</p>
    </div>
    <div class="flex items-center gap-2">
        <select class="form-input" style="width: auto;" onchange="window.location.href='?company_id=' + this.value">
            {% for c in companies %}
                <option value="{{ c.id }}" {% if c.id == company_id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
        <button class="btn btn-primary">+ Schedule Session</button>
    </div>
</div>

{% if sessions %}
<div class="grid grid-2">
    {% for session in sessions %}
    <div class="card">
        <div class="card-content">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
                <h3 style="font-weight: 600;">{{ session.focus_area or 'Coaching Session' }}</h3>
                <span class="badge {% if session.status == 'completed' %}badge-success{% elif session.status == 'scheduled' %}badge-info{% else %}badge-warning{% endif %}">
                    {{ session.status }}
                </span>
            </div>
            {% if session.description %}
            <p class="text-sm text-muted mb-3">{{ session.description }}</p>
            {% endif %}
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                <div>
                    <div class="text-xs text-muted">Date</div>
                    <div style="font-weight: 600;">{{ session.start_date.strftime('%b %d, %Y') if session.start_date else '—' }}</div>
                </div>
                <div>
                    <div class="text-xs text-muted">End Date</div>
                    <div style="font-weight: 600;">{{ session.end_date.strftime('%b %d, %Y') if session.end_date else '—' }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if scorecards %}
<h2 class="mt-6 mb-3" style="font-size: 1.125rem; font-weight: 600;">Scorecards</h2>
<div class="grid grid-2">
    {% for sc in scorecards %}
    <div class="card">
        <div class="card-content">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
                <h3 style="font-weight: 600;">{{ sc.coach_name or 'Evaluation' }}</h3>
                <span class="badge badge-info">{{ sc.evaluation_date.strftime('%b %d') if sc.evaluation_date }}</span>
            </div>
            {% if sc.overall_score %}
            <div style="margin-bottom: 0.5rem;">
                <span class="text-sm text-muted">Score: </span>
                <span style="font-weight: 600;">{{ sc.overall_score }}/10</span>
            </div>
            {% endif %}
            {% if sc.comments %}
            <p class="text-sm text-muted">{{ sc.comments }}</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

{% else %}
<div class="card" style="margin-top: 2rem;">
    <div class="card-content" style="text-align: center; padding: 3rem;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        <h2 class="card-title mb-2">No Sessions Yet</h2>
        <p class="text-muted mb-4">Schedule your first coaching session</p>
        <button class="btn btn-primary btn-lg">Schedule Session</button>
    </div>
</div>
{% endif %}
{% endblock %}