{% extends "admin_base.html" %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}Skill Booking | Admin{% endblock %}

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

{% block admin_content %}
{{ ui::list_open(label="Provider invites") }}
{{ ui::notice() }}
<p class="blocks-workspace-help">Invite providers and track their invitations. Use the links below to review skills, applications and bookings.</p>
<section class="blocks-workspace-panel" aria-labelledby="sb-enroll-link-title">
    <h2 id="sb-enroll-link-title">Share provider enrollment</h2>
    <p class="blocks-workspace-help">Share this link on social media. Providers sign in, save a profile and submit category applications for your review.</p>
    <a href="/plugins/skill-booking/enroll" data-provider-enroll-link>Open provider enrollment</a>
    <div class="blocks-workspace-field"><label for="sb-enroll-share-url">Enrollment link</label><input id="sb-enroll-share-url" readonly value="/plugins/skill-booking/enroll"></div>
</section>
<div class="blocks-workspace-panel">
    <p class="blocks-workspace-help">Quick links</p>
    <div class="blocks-workspace-actions">
        <a class="btn" href="/plugins/skill-booking/admin-skills">Skills catalog</a>
        <a class="btn" href="/plugins/skill-booking/admin-kyc">KYC applications</a>
        <a class="btn" href="/plugins/skill-booking/admin-bookings">Bookings</a>
        <a class="btn" href="/plugins/user-billing/admin">User Billing profiles</a>
        <a class="btn" href="/plugins/forms/admin">Forms library</a>
    </div>
</div>

{{ ui::fetch_list(config_url="/plugins/skill-booking/assets/admin/invites_list.json", mount_id="skill-booking-invites-list", label="Provider invites; scroll horizontally if needed", colspan=6, custom_mount=true, loading="Loading…") }}

<div id="sb-invite-modal" class="crud-modal" role="dialog" aria-modal="true" aria-labelledby="sb-invite-modal-title" hidden data-blocks-overlay>
    <div class="modal-backdrop"></div>
    <div class="modal-content">
        <div class="modal-header"><h2 id="sb-invite-modal-title">Invite provider</h2><button type="button" class="modal-close" aria-label="Close invitation" data-sb-invite-close>&times;</button></div>
        <div class="modal-body" id="sb-invite-form-mount"></div>
        <div class="modal-footer">
            <button type="button" class="btn" data-sb-invite-close>Cancel</button>
            <button type="button" class="btn btn-primary" id="sb-invite-submit">Send invite</button>
        </div>
    </div>
</div>
{{ ui::list_close() }}
{% endblock %}

{% block scripts %}
<script src="/plugins/skill-booking/assets/js/admin_invites.js?v={{ asset_version | default(value='1') }}"></script>
{% endblock %}