{% extends "layouts/dashboard.html" %}
{% load ui_tags %}
{% block extra_head %}
<link href="/static/css/vendor/quill.snow.css" rel="stylesheet">
{% endblock %}
{% block breadcrumbs %}
  {% url 'core:dashboard' as dashboard_url %}
  {% url 'rims_scholarships:scholarship_list' as scholarship_list_url %}
  {% crumb_trail "Dashboard" dashboard_url "Programmes" scholarship_list_url "New programme" "" as breadcrumbs %}
  {% include "components/breadcrumbs.html" %}
{% endblock %}
{% block content %}
{% include "components/page_header.html" with title="New scholarship programme" subtitle="Create a funding programme to enrol scholars into." eyebrow="Scholarship administration" %}

<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
<form method="post" id="scholarship-form">
  {% csrf_token %}
  {% include "components/forms/non_field_errors.html" with form=form %}

  <div class="card">
    <section class="card-section">
      <div class="card-section__head">
        <div>
          <p class="card-section__step">Programme</p>
          <h3 class="card-section__title">Programme details</h3>
        </div>
      </div>
      {% include "components/form_field.html" with field=form.name required=1 %}
      <div class="mt-5 field">
        <label class="field-label">Description</label>
        <div id="quill-description" class="quill--md"></div>
        <textarea name="{{ form.description.html_name }}" id="{{ form.description.id_for_label }}" class="hidden"></textarea>
        <p class="field-hint">Describe eligibility, scope, and objectives of this programme.</p>
        {% if form.description.errors %}<p class="field-error">{{ form.description.errors.0 }}</p>{% endif %}
      </div>
      <div class="mt-5">{% include "components/form_field.html" with field=form.grant_call hint="Optional — link this programme to an existing grant call." %}</div>
      <div class="mt-5">{% include "components/form_field.html" with field=form.partner hint="Optional — operations partner sponsoring this programme." %}</div>
      <div class="mt-5">{% include "components/form_checkbox.html" with field=form.is_active label="Active" hint="Inactive programmes won't appear in enrolment dropdowns." %}</div>
    </section>

    {% url 'rims_scholarships:scholarship_list' as cancel_url %}
    {% include "components/form_actions.html" with cancel_url=cancel_url submit_label="Create programme" %}
  </div>
</form>

<aside class="decision-rail">
  <div class="decision-rail__panel">
    <div class="decision-rail__head">
      <p class="decision-rail__title">Programme vs scholar</p>
    </div>
    <div class="decision-rail__body">
      <p class="text-xs leading-relaxed text-ruforum-text-muted">A <strong class="text-ruforum-text">programme</strong> is the funding shell — eligibility, sponsor, reporting cadence. Once created, you enrol individual <strong class="text-ruforum-text">scholars</strong> into it.</p>
    </div>
  </div>
  <div class="decision-rail__panel">
    <div class="decision-rail__head">
      <p class="decision-rail__title">Guidance</p>
    </div>
    <div class="decision-rail__body">
      <ul class="space-y-2 text-xs leading-relaxed text-ruforum-text-muted">
        <li class="flex items-start gap-2"><span class="mt-0.5 text-ruforum-primary">•</span>Link a grant call if scholars get their spot from that call.</li>
        <li class="flex items-start gap-2"><span class="mt-0.5 text-ruforum-primary">•</span>Attach the sponsor partner so donor reporting reflects it.</li>
        <li class="flex items-start gap-2"><span class="mt-0.5 text-ruforum-primary">•</span>Inactive programmes disappear from enrolment dropdowns but keep historical data.</li>
      </ul>
    </div>
  </div>
</aside>
</div>
{% endblock %}
{% block extra_js %}
<script src="/static/js/vendor/quill.min.js"></script>
<script>
  const quillDesc = new Quill('#quill-description', {
    theme: 'snow',
    placeholder: 'Describe the scholarship programme…',
    modules: { toolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['link','clean']] }
  });
  const descField = document.getElementById('{{ form.description.id_for_label }}');
  if (descField.value) quillDesc.root.innerHTML = descField.value;
  document.getElementById('scholarship-form').addEventListener('submit', function() {
    descField.value = quillDesc.root.innerHTML;
  });
</script>
{% endblock %}