{% extends "base.html" %}
{% load url %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}
    Add {{ type_to_add }} to {{ object }} - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'reader-studies:list' %}">Reader
            Studies</a></li>
        <li class="breadcrumb-item"><a href="{{ reader_study.get_absolute_url }}">{{ reader_study }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Add {{ type_to_add }}
        </li>
    </ol>
{% endblock %}

{% block content %}
    <h2>Add {{ type_to_add }} to {{ object }}</h2>

    <div id="readerStudySlug" class="d-none" data-slug="{{ object.slug }}"></div>

    <form action="{% url 'reader-studies:display-set-create' slug=reader_study.slug %}" method="post" id="form-new-ds">
      {% csrf_token %}
      {{ form|crispy }}
      <div id="new-interfaces"></div>
      <button type="button" id="add-new" class="btn btn-outline-primary mb-2" hx-get="{% url 'reader-studies:display-set-new-interfaces-create' slug=reader_study.slug %}" hx-target="#new-interfaces" hx-swap="beforeend">Add value for new interface</button>
      <div class="d-flex justify-content-between pb-2">
        <div>
          <a href="{% url 'reader-studies:display_sets' slug=reader_study.slug %}" class="btn btn-outline-primary">Back</a>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
{% endblock %}

{% block script %}
    {{ block.super }}
    {{ form_media }}
    <script src="{% static 'reader_studies/js/display_set_create.js' %}" type="text/javascript"></script>
    <script src="{% static 'reader_studies/js/autocomplete_htmx.js' %}" type="text/javascript"></script>
    <script type="text/javascript" src="{% static "cases/js/ignore_enter_button.js" %}"></script>

    {# TODO: This might not be used #}
    {% include 'grandchallenge/partials/drf_csrf.html' %}

    <link rel="stylesheet" href="{% static 'css/select2-bootstrap4-theme/select2-bootstrap4.css' %}">
{% endblock %}