{% extends 'base.html' %} 
{% block body_content %}
<div class="row">
    <div class="col-md-12">
        <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
            <h1 class="display-4">{{ title }}</h1>
            <p class="lead"></p>
        </div>
    </div>
</div>

  <div class="table-responsive">
    <table class="table table-hover table-bordered">
      <thead>
        <tr>
          <th scope="col">Job Title</th>
          <th scope="col">Date</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
      {% for job in jobs %}
        <tr>
          <td style="vertical-align: middle">{{ job.title|truncatechars:65 }}</td>
          <td style="vertical-align: middle">{{ job.created.date }}</td>
            <td style="vertical-align: middle">
                <form action="{% url 'jobs:job_toggle' %}" method="post">{% csrf_token %}
                    <input type="hidden" name="job_id" value="{{ job.id }}">
                    {% if job.active %}
                    <button type="submit" class="btn btn-warning btn-block">Deactivate</button>
                    {% else %}
                    <button type="submit" class="btn btn-success btn-block">Activate</button>
                    {% endif %}
                </form>
            </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}