{% extends 'base.html' %}
{% block content %}
  <h2>Reports</h2>
  <div class="grid cols-2" style="margin-top:12px">
    <div class="card">
      <h3>Sales</h3>
      <form method="get" action="{{ url_for('report_sales') }}" class="form">
        <div class="grid cols-2">
          <div class="field">
            <label class="label">Start</label>
            <input type="date" name="start" />
          </div>
          <div class="field">
            <label class="label">End</label>
            <input type="date" name="end" />
          </div>
        </div>
        <div>
          <button class="btn-primary" type="submit">View</button>
        </div>
      </form>
    </div>
    <div class="card">
      <h3>Purchases</h3>
      <form method="get" action="{{ url_for('report_purchases') }}" class="form">
        <div class="grid cols-2">
          <div class="field">
            <label class="label">Start</label>
            <input type="date" name="start" />
          </div>
          <div class="field">
            <label class="label">End</label>
            <input type="date" name="end" />
          </div>
        </div>
        <div>
          <button class="btn-primary" type="submit">View</button>
        </div>
      </form>
    </div>
    <div class="card">
      <h3>Inventory</h3>
      <a class="btn-primary" href="{{ url_for('report_inventory') }}">View Inventory</a>
    </div>
    <div class="card" style="border-color: #f59e0b;">
      <h3 style="color: #92400e;">Waste</h3>
      <form method="get" action="{{ url_for('report_waste') }}" class="form">
        <div class="grid cols-2">
          <div class="field">
            <label class="label">Start</label>
            <input type="date" name="start" />
          </div>
          <div class="field">
            <label class="label">End</label>
            <input type="date" name="end" />
          </div>
        </div>
        <div>
          <button class="btn-primary" type="submit">View Waste Report</button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}