{% extends "frontend/base.html" %}
{% load i18n static %}
{% load partials %}
{% block html_title %}
    {% block page_title %}
        {% translate "Organization Details" %}
    {% endblock page_title %}
{% endblock html_title %}
{% partialdef org-name %}
<td>
    {{ form.instance.name }}
    {% if has_change_permission %}
        <button class="btn btn-primary"
                hx-get="{{ request.path }}?fragment=org-name-edit&hx-single-field=name"
                hx-target="closest td"
                hx-swap="outerHTML">{% translate "Edit" %}</button>
    {% endif %}
</td>
{% endpartialdef org-name %}
{% partialdef org-name-edit %}
<td>
    <form hx-target="closest td"
          hx-swap="outerHTML"
          hx-post="{{ request.url }}">
        <div class="d-flex align-items-baseline">
            {{ form.name.as_field_group }}
            <input type="hidden" name="hx-single-field" value="name">
            <input type="hidden" name="fragment" value="org-name">
            <button type="submit" class="btn btn-primary mx-1">{% translate "Save" %}</button>
            <button type="button"
                    class="btn btn-secondary"
                    hx-get="{{ request.path }}?fragment=org-name"
                    hx-target="closest td"
                    hx-swap="outerHTML">{% translate "Cancel" %}</button>
        </div>
    </form>
</td>
{% endpartialdef org-name-edit %}
{% block card_content %}
    <div class="table-responsive">
        <table class="table table-lg">
            <tbody>
                <tr>
                    <th class="w-25">
                        <span class="d-flex mt-2">{% translate "Name" %}</span>
                    </th>
                    {% partial org-name %}
                </tr>
            </tbody>
        </table>
    </div>
{% endblock card_content %}
