{% extends 'base.html' %}
{% block content %}
  <h2>Dashboard</h2>
  <h4>Your Orders</h4>
  <table class="table">
    <thead><tr><th>ID</th><th>Package</th><th>Target</th><th>Status</th><th>Actions</th></tr></thead>
    <tbody>
      {% for o in orders %}
        <tr>
          <td>{{ o.id }}</td>
          <td>{{ o.package.title }}</td>
          <td>{{ o.target_url }}</td>
          <td id="status-{{ o.id }}">{{ o.status }}</td>
          <td><a class="btn btn-sm btn-outline-primary" href="#" onClick="fetchStatus({{ o.id }});return false;">Refresh</a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <script>
  function fetchStatus(orderId){
    fetch('/dashboard/order_status/' + orderId)
      .then(r => r.json()).then(d => {
        document.getElementById('status-' + orderId).innerText = d.status;
      })
  }
  </script>
{% endblock %}