Martinhal-Birthday-Mailing-App/templates/dashboard.html

{% extends "base.html" %}
{% set active = 'dashboard' %}
{% block title %}Dashboard - Birthday Manager{% endblock %}
{% block content %}

<!-- ============== Yesterday / Today / Tomorrow birthdays ============== -->
<div class="tri-banner">
  <section class="card day-panel">
    <p class="eyebrow">Yesterday</p>
    <h2>Yesterday's Birthdays</h2>
    {% if yesterday_list %}
      <ul class="today-people">
        {% for item in yesterday_list %}
          <li><strong>{{ item.row.first_name }} {{ item.row.last_name }}</strong> turned {{ item.age }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="muted">No birthdays yesterday.</p>
    {% endif %}
  </section>

  <section class="card day-panel day-panel-today">
    <div class="today-left">
      <p class="eyebrow">Today, {{ today.strftime('%A %d %B %Y') }}</p>
      <h2>Today's Birthdays</h2>
      {% if today_list %}
        <ul class="today-people">
          {% for item in today_list %}
            <li>
              🎉 <strong>{{ item.row.first_name }} {{ item.row.last_name }}</strong>
              turns {{ item.age }}
              <span class="pill {{ 'pill-ok' if item.sent else 'pill-wait' }}">
                {{ 'e-mail sent' if item.sent else 'e-mail pending' }}
              </span>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="muted">No birthdays today.</p>
      {% endif %}
    </div>
    <form method="post" action="{{ url_for('force_send') }}" class="today-right">
      <button class="btn btn-accent btn-lg" type="submit" {{ 'disabled' if not today_list }}>Force Send</button>
      <p class="muted small">Sends today's birthday e-mail{{ 's' if today_list|length != 1 }} again immediately.</p>
    </form>
  </section>

  <section class="card day-panel">
    <p class="eyebrow">Tomorrow</p>
    <h2>Tomorrow's Birthdays</h2>
    {% if tomorrow_list %}
      <ul class="today-people">
        {% for item in tomorrow_list %}
          <li><strong>{{ item.row.first_name }} {{ item.row.last_name }}</strong> turns {{ item.age }}</li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="muted">No birthdays tomorrow.</p>
    {% endif %}
  </section>
</div>

<!-- ======================= Add / remove entries ======================= -->
<section class="card">
  <h2>Birthday entries</h2>
  <form method="post" action="{{ url_for('add_birthday') }}" class="entry-form">
    <label>First Name<input type="text" name="first_name" required></label>
    <label>Last Name<input type="text" name="last_name" required></label>
    <label>Date of Birth<input type="date" name="dob" required></label>
    <label>Gender
      <select name="gender" required>
        <option value="" disabled selected>Select…</option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </label>
    <label>E-mail address<input type="email" name="email" required placeholder="needed to send the greeting"></label>
    <button class="btn btn-primary" type="submit">Add entry</button>
  </form>

  {% if entries %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr><th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Gender</th><th>E-mail</th><th></th></tr>
      </thead>
      <tbody>
        {% for e in entries %}
        <tr>
          <td>{{ e.first_name }}</td>
          <td>{{ e.last_name }}</td>
          <td>{{ e.dob }}</td>
          <td>{{ e.gender }}</td>
          <td>{{ e.email }}</td>
          <td class="ta-right">
            <form method="post" action="{{ url_for('delete_birthday', bid=e.id) }}"
                  onsubmit="return confirm('Remove {{ e.first_name }} {{ e.last_name }}?')">
              <button class="btn btn-danger btn-sm" type="submit">Remove</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
    <p class="muted">No entries yet. Add the first birthday above.</p>
  {% endif %}
</section>

<!-- ======================= Yearly calendar ======================= -->
<section class="card">
  <div class="cal-head">
    <h2>Yearly overview</h2>
    <div class="cal-nav">
      <a class="btn btn-ghost btn-sm" href="{{ url_for('dashboard', year=year-1) }}">&larr; {{ year - 1 }}</a>
      <span class="cal-year">{{ year }}</span>
      <a class="btn btn-ghost btn-sm" href="{{ url_for('dashboard', year=year+1) }}">{{ year + 1 }} &rarr;</a>
    </div>
  </div>
  <div class="year-grid">
    {% for month in months %}
    <div class="month">
      <h3>{{ month.name }}</h3>
      <table class="mini-cal">
        <thead><tr><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th><th>Su</th></tr></thead>
        <tbody>
          {% for week in month.weeks %}
          <tr>
            {% for cell in week %}
              <td class="{{ 'bday' if cell.names }} {{ 'today' if cell.today }}"
                  {% if cell.names %}title="{{ cell.names | join(', ') }}"{% endif %}>
                {{ cell.day }}
                {% if cell.names %}<span class="dot"></span>{% endif %}
              </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endfor %}
  </div>
  <p class="muted small">Days marked with a dot have a birthday — hover to see who. Today is outlined.</p>
</section>

{% endblock %}