{% macro inline_table_row(person) %}
    <tr hx-target="this" hx-swap="outerHTML">
        <td>{{ person.name }}</td>
        <td>{{ person.address }}</td>
        <td>{{ person.city }}</td>
        <td>
            <button
                class="btn btn-outline-primary"
                hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"

            >
                <i class="bi bi-pencil-square"></i>
            </button>
        </td>
    </tr>
{% endmacro %}


{% macro inline_table_row_edit(person, cities, errors={}) %}
    {% macro render_input(field_name, value) %}
        {% set has_error = field_name in errors %}
        <input
            class="form-control {% if has_error %}is-invalid{% endif %}"
            name="{{ field_name }}"
            value="{{ value }}"
            {% if has_error %}title="{{ errors[field_name] }}"{% endif %}
        >
    {% endmacro %}

    {% macro render_select(field_name, value, options) %}
        {% set has_error = field_name in errors %}
        <select 
            class="form-select {% if has_error %}is-invalid{% endif %}"
            name="{{ field_name }}"
            {% if has_error %}title="{{ errors[field_name] }}"{% endif %}
        >
            {% for option in options %}
                {% set selected = value == option %}
                <option value="{{ option }}" {% if selected %}selected{% endif %}>
                    {{ option }}
                </option>
            {% endfor %}
        </select> 
    {% endmacro %}
    
    <tr 
        id="person-row-{{ person.pk }}" 
        hx-target="this" 
        hx-swap="outerHTML"
    >
        <td>
            {{ render_input(field_name="name", value=person.name) }}
        </td>
        <td>
            {{ render_input(field_name="address", value=person.address) }}
        </td>
        <td>
{#            {{ render_input(field_name="city", value=person.city) }}#}
            {{ render_select(field_name="city", value=person.city, options=cities) }}
        </td>
        <td>
            <button
                class="btn btn-outline-success"
                hx-post="{{ url("table-inline-edit-row", pk=person.pk) }}"
                hx-include="#person-row-{{ person.pk }} input, #person-row-{{ person.pk }} select"
            >
                <i class="bi bi-check-circle-fill"></i>
            </button>
            <button
                class="btn btn-outline-danger"
                hx-get="{{ url("table-inline-edit-row", pk=person.pk) }}"
                hx-vals='{"action": "cancel"}'
            >
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </td>
    </tr>
{% endmacro %}