{% include 'partials/head' %}

{% include 'partials/flash' %}

<style>
th {
  min-width: 100px;
  text-align: left;
  background: #ddd;
}
th:nth-child(2) {
  min-width: 300px;
}
th:nth-child(3) {
  min-width: 170px;
}
table,tr,th,td {
  margin: 0;
  padding: 0;
}
th,td {
  padding: 5px;
}
tr:nth-child(2n+1) {
  background: #f8f8f8;
}
</style>

<nav class="resource-nav">
  <a href="/admin/" class="btn">Back</a>
</nav>

<section class="main resource">

  <h2>Push Notifications</h2>

  <div class="device-count" data-count="{{ device_count }}">Device count: {{ device_count }}</div>

  <table class="notifications" cellpadding="0" cellspacing="0">
    <tr>
      <th>Key</th>
      <th>Message</th>
      <th>Last Push</th>
      <th></th>
    </tr>
  {% for pair in notifications %}
    {% assign name = pair[0] %}
    {% assign spec = pair[1] %}
    <tr>
      <td>
        {{name | escape}}
      </td>
      <td>
        {{spec.alert}}
      </td>
      <td class="notification-date">
        {% unless spec.last_push %}
          Never
        {% else %}
          {{ spec.last_push | date: "%a %d-%b-%Y %H:%M" }}
        {% endunless %}
      </td>
      <td>
        <button data-key="{{name}}" class="btn">send</button>
      </td>
    </tr>
  {% endfor %}
  </table>

</section>

{% include 'partials/tail' %}

<script src="public/push.js"></script>