{% extends "base.html" %}

{% block title %}Oozappa - Jobset{% endblock %}

{% block headline %}Available JobSet{% endblock %}

{% block in_head %}
  <script>
    $(function() {
      $('#jobset_list tbody').sortable({
        update: function(event, ui) {
          data = $(this).sortable('serialize');
          $.ajax({
              data:JSON.stringify(data),
              dataType: 'json',
              contentType: 'application/json',
              type: 'POST',
              url: '/jobsets/reorder/'
          }).fail(function(hxr, status, err){
            alert(err);
          });
        }
      });
      $('#jobset_list tbody').disableSelection();
    });
    </script>
{% endblock %}

{% block body %}
<div>
  <table id="jobset_list" class="striped rounded">
  <thead><tr><th>Jobset title</th><th>Description</th></tr></thead>
    <tbody>
  {% for jobset in jobset_list %}
      <tr id="jobset_{{ jobset.id }}">
        <td><a href="{{ url_for('jobset', jobset_id=jobset.id) }}">{{ jobset.title }}</a></td>
        <td>{{ jobset.description }}</td>
      </tr>
  {% endfor %}
    </tbody>
  </table>
</div>
<div>
  <div class="medium metro rounded btn primary"><a href="{{ url_for('create_jobset') }}">Create JobSet</a></div>
{% endblock %}