{% extends "layout/base.html" %}
{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
  <div>
    <h2 class="mb-1">News reads</h2>
    <div class="text-muted">{{ item.title }}</div>
  </div>
  <div>
    <a class="btn btn-outline-secondary" href="{{ url_for('main.settings', section='news') }}">Back to News</a>
  </div>
</div>

<div class="card">
  <div class="card-header">Read by</div>
  <div class="card-body">
    {% if reads %}
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th scope="col">User</th>
              <th scope="col">Read at</th>
            </tr>
          </thead>
          <tbody>
            {% for read, user in reads %}
            <tr>
              <td>{{ user.username }}</td>
              <td>{{ read.read_at|local_datetime }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="text-muted">No reads yet.</div>
    {% endif %}
  </div>
</div>
{% endblock %}