{% extends 'base/base.html' %}
{% block start %}

<section class="main_content dashboard_part large_header_bg">


<div class="main_content_iner ">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="white_card card_height_100 mb_30">
<div class="white_card_header">
<div class="box_header m-0">
<div class="main-title">
<h3 class="m-0">Machine</h3>
</div>
</div>
</div>
<div class="white_card_body">
<div class="QA_section">
<div class="white_box_tittle list_header">
<h4> </h4>
{% comment %} {% if messages %}
    <div class="alert text-white bg-primary" role="alert">
    {% for message in messages %}
         <div class="alert-text">{{ message }}</div>
    {% endfor %}
    </div>     
{% endif %} {% endcomment %}
<div class="box_right d-flex lms_block">
<div class="serach_field_2">
<div class="search_inner">
<form active="#">
<div class="search_field">
<input type="text" placeholder="Search content here...">
</div>
<button type="submit"> <i class="ti-search"></i> </button>
</form>
</div>
</div>
   
<div class="add_button ms-2">
<a href="{%url 'Add_Machine' %}" class="btn_1">Add New</a>
</div>
</div>
</div>
<div class="QA_table mb_30">

<table class="table lms_table_active ">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">title</th>
<th scope="col">Device </th>
<th scope="col">State</th>
<th scope="col" style="width:200px;">Skill</th>
<th scope="col">Created On</th>
<th scope="col">action</th>
</tr>
</thead>
<tbody>
{% if data %}
    {% for item in data %}
        <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.device_tid }}</td>
        <td>{{ item.state }}</td>
        <td>{{ item.skill }}</td>
        <td>{{ item.created_on }}</td>
        <td><a href="{% url 'Edit_Machine' id=item.ID %}" class="status_btn">edit</a> <a href="{% url 'delete_Machine' id=item.ID %}" class="status_btn">delete</a></td>
        </tr>
    {% endfor %}
{% else %}
    <tr>
      <td colspan="12"style="text-align:center">No data available</td>
    </tr>
  {% endif %}



</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
</div>
</div>
</div>
</div>

<div class="footer_part">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="footer_iner text-center">
{% comment %} <p>2020 © Influence - Designed by <a href="#"> <i class="ti-heart"></i> </a><a href="#"> Dashboard</a></p> {% endcomment %}
</div>
</div>
</div>
</div>
</div>
</section>



<div id="back-top" style="display: none;">
<a title="Go to Top" href="#">
<i class="ti-angle-up"></i>
</a>
</div>



{% endblock %}