{% extends "base.html" %}
{# Copyright The IETF Trust 2020, All Rights Reserved #}
{% load origin %}
{% load static %}
{% load django_bootstrap5 %}
{% block title %}Edit action holders for {{ titletext }}{% endblock %}
{% block pagehead %}{{ form.media.css }}{% endblock %}
{% block content %}
    {% origin %}
    <h1>
        Edit action holders
        <br>
        <small class="text-body-secondary">{{ titletext }}</small>
    </h1>
    <form enctype="multipart/form-data" method="post">
        {% csrf_token %}
        {% bootstrap_form form %}
        <div class="mb-3">
            <label class="form-label">Related people</label>
            <div class="btn-toolbar"
                 role="toolbar"
                 id="role-toolbar-{{ role_type_label|slugify }}">
                {% for doc_role in role_labels %}
                    <div class="btn-group-vertical btn-group-sm" role="group">
                        <button type="button"
                                class="btn btn-primary"
                                id="add-{{ doc_role.slug }}"
                                onclick="local_js.add_ah('{{ doc_role.slug }}')">
                            Add {{ doc_role.label }}
                        </button>
                        <button type="button"
                                class="btn btn-primary"
                                id="del-{{ doc_role.slug }}"
                                onclick="local_js.del_ah('{{ doc_role.slug }}')">
                            Remove {{ doc_role.label }}
                        </button>
                    </div>
                {% endfor %}
            </div>
        </div>
        <button type="submit" class="btn btn-primary" name="submit" value="Save">Submit</button>
        <a class="btn btn-secondary float-end"
           href="{% url "ietf.doc.views_doc.document_main" name=doc.canonical_name %}">
            Back
        </a>
    </form>
{% endblock %}
{% block js %}
    {{ form.media.js }}
    <script src="{% static "ietf/js/edit_action_holders.js" %}"></script>
{% endblock %}