{% extends 'base.html' %}


{% block view_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
{% endblock %}


{% block nav_items %}
    {{ add_dashboard_nav() }}
    {{ add_budgets_nav() }}
    {{ add_budget_items_nav() }}
    {{ add_accounts_nav(active=True) }}
    {{ add_transactions_nav() }}
    {{ add_user_nav() }}
{% endblock %}


{% block modals %}
    {{ add_edit_profile_modal() }}
    {{ add_reset_password_modal() }}
{% endblock %}


{% block main_content %}
<div class="container my-4">
    <button type="button" data-bs-toggle="modal" data-bs-target="#createAccountModal" class="btn btn-primary">+ Add New Account</button>
</div>
<div class="modal fade" id="createAccountModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="account_create" action="{{ url_for('account.create') }}" method="post">
                    {{ add_form_input(id='name', label='Account Name:', required=True) }}
                    {{ add_form_input(id='description', label='Account Description:') }}
                    {{ add_form_input(id='account_number', label='Account Number:') }}
                    {{ add_form_input(id='account_route_nbr', label='Account Routing Number:') }}
                    {{ add_form_input(id='opening_amount', label='Opening Amount:', type='number', number_step='0.01') }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" form="account_create">Save</button>
            </div>
        </div>
    </div>
</div>

{% for account in accounts %}
<div class="container my-4">
    <a href="#" data-bs-toggle="modal" data-bs-target="#updateAccountModal-{{ account.id }}" title="{{ account.name }}">
        <div class="p-5 bg-body-tertiary border rounded-3">
            <h1 class="text-body-emphasis">{{ account.name }}</h1>
            <p>{{ account.description }}</p>
        </div>
    </a>
</div>
<div class="modal fade" id="updateAccountModal-{{ account.id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update {{ account.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="account_update-{{ account.id }}" action="{{ url_for('account.update') }}" method="post">
                    {{ add_form_input(id='id', label='Account ID:', value=account.id, type='hidden') }}
                    {{ add_form_input(id='name', label='Account Name:', value=account.name, required=True) }}
                    {{ add_form_input(id='description', label='Account Description:', value=account.description) }}
                    {{ add_form_input(id='account_number', label='Account Number:', value=account.account_number) }}
                    {{ add_form_input(id='account_route_nbr', label='Account Routing Number:', value=account.account_route_nbr) }}
                    {{ add_form_input(id='opening_amount', label='Opening Amount:', value=account.opening_amount, type='number', number_step='0.01', required=True) }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-bs-toggle="modal" data-bs-target="#deleteAccountModal-{{ account.id }}">Delete</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" form="account_update-{{ account.id }}">Save</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteAccountModal-{{ account.id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger"><i class="bi bi-exclamation-circle-fill"></i> Delete {{ account.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong>{{ account.name }}</strong>?</p>
                <form id="account_delete-{{ account.id }}" action="{{ url_for('account.delete') }}" method="post">
                    {{ add_form_input(id='id', label='Account ID:', value=account.id, type='hidden') }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" form="account_delete-{{ account.id }}">Yes</button>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}