{% extends "admin_base.html" %}
{% import "macros/workspace_ui.html" as ui %}
{% block page_title %}Need to skill map{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/plugins/care-circle/assets/css/care-circle.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}
{% block admin_content %}
<section class="blocks-workspace mx-auto w-full max-w-6xl px-4 py-6 md:px-6" aria-label="Need → Skill map">
<p class="blocks-workspace-help">Review how each care need maps to a bookable skill. Check missing mappings before relying on a service.</p>
<div data-care-map-notice>{{ ui::notice() }}</div>
{{ ui::fetch_list(config_url="/plugins/care-circle/assets/admin/services_list.json", mount_id="care-services", label="Need → Skill map; scroll horizontally if needed", colspan=6, custom_mount=true, loading="Loading need → skill map…") }}
<div id="care-service-modal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="care-service-modal-title">
  <div class="modal-content">
    <div class="modal-header"><h2 id="care-service-modal-title">Add care need</h2><button type="button" class="close-modal" aria-label="Close">&times;</button></div>
    <div class="modal-body"><div data-workspace-notice>{{ ui::notice() }}</div><div id="care-service-form-fields"></div></div>
  </div>
</div>
</section>
{% endblock %}