{% extends 'layout/base.html' %}
{% block content %}
<div class="container mt-5">
  <div class="d-flex justify-content-between align-items-center">
    <h2>Your Expenses</h2>
    <a href="{{ url_for('expenses.add_expense') }}" class="btn btn-primary">Add Expense</a>
  </div>
  <table class="table table-bordered table-striped mt-3">
    <thead class="table-dark">
      <tr>
        <th>Title</th>
        <th>Amount</th>
        <th>Date</th>
        <th>Company</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {% for e in expenses %}
      <tr>
        <td>{{ e.title }}</td>
        <td>₹ {{ "%.2f"|format(e.amount) }}</td>
        <td>{{ e.date }}</td>
        <td>{{ e.company.name }}</td>
        <td>
          <a href="{{ url_for('expenses.expense_detail', id=e.id) }}" class="btn btn-sm btn-info">View</a>
          <a href="{{ url_for('expenses.edit_expense', id=e.id) }}" class="btn btn-sm btn-warning">Edit</a>
          <form method="POST" action="{{ url_for('expenses.delete_expense', id=e.id) }}" style="display:inline-block;"
                onsubmit="return confirm('Are you sure you want to delete this expense?');">
            <button class="btn btn-sm btn-danger">Delete</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}