{% load money %}
<div class="overflow-x-auto">
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Concept</th>
                <th class="text-right">Amount</th>
                <th class="text-right w-24">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for income in incomes %}
                {% if editing_id == income.id %}
                <tr>
                    <td colspan="4" class="p-0">
                        <form data-liveview-function="save_income"
                              data-action="submit->page#run"
                              class="flex flex-wrap gap-2 items-center p-2">
                            <input type="hidden" name="income_id" value="{{ income.id }}">
                            <input type="hidden" name="year" value="{{ year }}">
                            <input type="hidden" name="month" value="{{ month }}">
                            <input type="date" name="income_date" value="{{ income.date|date:'Y-m-d' }}" class="input input-bordered input-sm flex-1 min-w-[7rem]" required>
                            <input type="text" name="income_concept" value="{{ income.concept }}" class="input input-bordered input-sm flex-[2] min-w-[8rem]" required>
                            <input type="text" name="income_amount" inputmode="decimal" value="{{ income.amount|money }}" class="input input-bordered input-sm flex-1 min-w-[5rem] text-right" required>
                            <button type="submit" class="btn btn-primary btn-sm">Save</button>
                            <a data-liveview-function="cancel_edit_income"
                               data-action="click->page#run"
                               data-data-year="{{ year }}"
                               data-data-month="{{ month }}"
                               class="btn btn-ghost btn-sm">Cancel</a>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr id="income-row-{{ income.id }}">
                    <td class="whitespace-nowrap">{{ income.date|date:"M d" }}</td>
                    <td>{{ income.concept }}</td>
                    <td class="text-right whitespace-nowrap">{{ income.amount|money }} €</td>
                    <td class="text-right">
                        <div class="dropdown dropdown-end">
                            <label tabindex="0" class="btn btn-ghost btn-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/>
                                </svg>
                            </label>
                            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow z-50">
                                <li>
                                    <a data-liveview-function="edit_income"
                                       data-action="click->page#run"
                                       data-data-id="{{ income.id }}"
                                       data-data-year="{{ year }}"
                                       data-data-month="{{ month }}">Edit</a>
                                </li>
                                <li>
                                    <a data-liveview-function="delete_income"
                                       data-action="click->page#run"
                                       data-data-id="{{ income.id }}"
                                       data-data-year="{{ year }}"
                                       data-data-month="{{ month }}"
                                       class="text-error">Delete</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                {% endif %}
            {% empty %}
            <tr>
                <td colspan="4" class="text-center text-base-content/50">No income recorded</td>
            </tr>
            {% endfor %}
        </tbody>
        {% if incomes %}
        <tfoot>
            <tr class="font-bold">
                <td colspan="2">Total</td>
                <td class="text-right">{{ total|money }} €</td>
                <td></td>
            </tr>
        </tfoot>
        {% endif %}
    </table>
</div>

<form data-liveview-function="add_income"
      data-action="submit->page#run"
      class="flex flex-wrap gap-2 items-end mt-4">
    <input type="hidden" name="year" value="{{ year }}">
    <input type="hidden" name="month" value="{{ month }}">
    <div class="form-control flex-1 min-w-[7rem]">
        <label class="label py-1"><span class="label-text text-xs">Date</span></label>
        <input type="date" name="income_date" value="{{ today }}" class="input input-bordered input-sm w-full" required>
    </div>
    <div class="form-control flex-1 min-w-[6rem]">
        <label class="label py-1"><span class="label-text text-xs">Amount</span></label>
        <input type="text" name="income_amount" inputmode="decimal" class="input input-bordered input-sm w-full" placeholder="0,00" required>
    </div>
    <div class="form-control flex-[2] min-w-[8rem]">
        <label class="label py-1"><span class="label-text text-xs">Concept</span></label>
        <input type="text" name="income_concept" class="input input-bordered input-sm w-full" placeholder="Salary, bonus..." required>
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Add</button>
</form>