{% load rmtmgmt_tags %}
{% load rolemgmt_tags %}

<table id="example1" class="table table-bordered table-striped">
    <thead>
        <tr>
              <th></th>
              <th>Client Name</th>
              <th>Requirement ID</th>
              <th>Group Name</th>
              <th>Position</th>
              <th>Skills</th>
              <th>Manager</th>
              <th>Experience</th>
              <th>Selections / Total Positions</th>
              <th>Position Status</th>
              <th>Created Date</th>
              <th>Action</th>
              <th style="display:none;">hide</th>
        </tr>
    </thead>
    <tbody>
    {% for r in req %}

    <tr>
          <td>
            {% with r.id|req_age as req_age %}
                <label class="badge">{{ req_age }}d</label>
                <font style="font-size:80%;">{{ r.get_position_status_display }}</font>
                {% if r.today_tag and r.position_status != 4%}
                    <input type="checkbox" name="tod_tag" id="id_tod_tag{{r.id}}" onchange="change_tod_tag({{r.id}});" checked>
                    <span id="to_day_span{{ r.id }}">Current</span>
                {% elif r.position_status != 4 %}
                    <input type="checkbox" name="tod_tag" id="id_tod_tag{{r.id}}" onchange="change_tod_tag({{r.id}});">
                    <span id="to_day_span{{r.id}}"></span>
                {% endif %}
                {% with r.id|req_style_check as req_style_check %}
                    {% if req_style_check == 1 %}
                        <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter1"></meter>
                    {% elif req_style_check == 2 %}
                        <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter2"></meter>
                    {% else %}
                        <meter value="{{ req_age }}" min="0" max="{{ req_age }}" class="meter3"></meter>
                    {% endif %}
                {% endwith %}
            {% endwith %}
          </td>
          <td>{{ r.client }}</td>
          <td>{{ r.client_requirement_id }}</td>
          <td>{{ r.name }}</td>
          <td>{{ r.position_name }}</td>
          <td>
              {% for skill in r|get_skill_p_levels %}
                {{ skill.skill.skill_name }} - {{ skill.proficiency_level.level }}<br>
              {% empty %}
                {{ r.skills }}
              {% endfor %}
          </td>
          <td>{{ r.manager }}</td>
          <td>{{ r.min_exp }}</td>
          <td>{{ r.id|selections }} / {{ r.open_position }}</td>
          <td>
            <select name="req_status" id="id_req_status_{{ r.id }}"onchange="updatepositionstatus({{r.id}});">
                {% for postion in req_status %}
                    {% if postion.0 == r.position_status %}
                        <option value={{ postion.0 }} selected>{{ postion.1 }}</option>
                    {% else %}
                        <option value={{ postion.0 }}>{{ postion.1 }}</option>
                    {% endif %}
                {% endfor %}
            </select>
          </td>
          <td>{{ r.created_on }}</td>
          <td>
            <a href="/requirement-management/edit/{{ r.id }}/"><i class="fa fa-fw fa-edit" style="color: #000000;"></i>Edit</a> |
            <a href="/requirement-management/view/{{ r.id }}/" ><i class="fa fa-fw fa-eye" style="color: darkred;"></i>View</a>
          </td>
          <td style="display:none;">{{ r.get_position_status_display }}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>

<script>
  $(function () {
	$('#example1').DataTable({
         "scrollX": true,
         "searching": true,
         "paging": true,
         "bInfo": true,
        "aoColumnDefs": [
                            { "bSearchable": false, "aTargets": [ 9 ] },
                            { targets: [0], type: 'natural' }
                        ],
    });

     if ( $(window).width() > 739) {
        $('.dataTables_filter').append('&nbsp;&nbsp;&nbsp;&nbsp;<select onchange="get_requirements();" id="id_select_requirement" class="form form-control" style="height:31px;"><option value="1" selected>OPEN</option><option value="2">HOLD</option><option value="3">RESUME</option><option value="4">CLOSED</option><option value="0">ALL</option></select>');
     }
     else {
        $('.dataTables_filter').append('<select onchange="get_requirements();" id="id_select_requirement" class="form form-control" style="height:31px;"><option value="1" selected>OPEN</option><option value="2">HOLD</option><option value="3">RESUME</option><option value="4">CLOSED</option><option value="0">ALL</option></select>');
     }
     $("#id_select_requirement option[value='" + {{ status }} + "']").attr("selected","selected");
     $('.dataTables_filter').parent().addClass('pull-left');
     $('.dataTables_length').parent().addClass('pull-right');
     $('.dataTables_length').addClass('pull-right');
     $('.dataTables_filter').addClass('pull-left');
     if ( $(window).width() > 739) {
        $('[type=search]').attr('size','60%');
     }
     else {
        $('[type=search]').attr('size','25%');
     }
  })
</script>