{% include 'partials/head' %}

{% include 'partials/flash' %}

<style>
th {
  min-width: 100px;
  text-align: left;
  background: #ddd;
}
th:nth-child(2) {
  min-width: 300px;
}
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>
  
  <p>
    <a href="/_services/push/new">Send custom push notification</a>
  </p>

  <table class="notifications" cellpadding="0" cellspacing="0">
    <tr>
      <th>Key</th>
      <th>Message</th>
      <th>Tokens</th>
      <th></th>
    </tr>
  {% assign count = notifications.hub.count %}
  {% for pair in notifications %}
    {% assign name = pair[0] %}
    {% assign spec = pair[1] %}
    <tr>
      <td>
        {{name | capitalize}}
      </td>
      <td>
        {{spec.alert}}
      </td>
      <td>
        {{count}}
      </td>
      <td>
        <button data-key="{{name}}" data-count="{{count}}" class="btn">send</button>
      </td>
    </tr>
  {% endfor %}
  </table>

</section>

{% include 'partials/tail' %}

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