{% extends "base.html" %}

{% block page_title %}Find skills{% endblock %}

{% block extra_head %}
{% include "skill-booking/ui-head.html" %}
{% endblock %}

{% block content %}
<div class="sb-page blocks-workspace" data-sb-page="skills">
    <div class="sb-page-header">
        <div>
            <h1>Find skilled people</h1>
            <p>Choose a skill to see who’s available and book.</p>
        </div>
    </div>

    <p class="sb-disclaimer">{{ facilitator_disclaimer | default(value='This site facilitates introductions and billing tools only. Job payments go directly to the worker via UPI. We do not employ providers or guarantee work quality.') }}</p>

    <div class="sb-skill-grid">
        {% for s in skills %}
        <a class="sb-skill-card" href="/plugins/skill-booking/s/{{ s.slug }}">
            <div class="sb-skill-card-top">
                <h2>{{ s.label }}</h2>
                {% if show_provider_counts %}
                <span class="sb-skill-count" title="Enrolled providers">{{ s.provider_count | default(value=0) }}</span>
                {% endif %}
            </div>
            {% if s.description %}
            <p>{{ s.description }}</p>
            {% else %}
            <p class="text-muted">See who’s free and book.</p>
            {% endif %}
            <span class="sb-skill-card-cta">
                {% if show_provider_counts %}
                    {% if s.provider_count and s.provider_count > 0 %}
                    {{ s.provider_count }} available · Browse →
                    {% else %}
                    None listed yet · Browse →
                    {% endif %}
                {% else %}
                Browse availability →
                {% endif %}
            </span>
        </a>
        {% else %}
        <p class="text-muted">No skills are published yet.</p>
        {% endfor %}
    </div>
</div>
{% endblock %}