{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}

<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
    <p class="p-2" style="background-color:#212529;color:white;">SACHET DEFECT DASHBOARD</p>
    <div class="px-3 pb-3">
        <div class="mb-3">
            
              <div class="input-group mb-3">
                <input type="text" class="form-control shadowed" id="myInput" placeholder="Search.." aria-label="Recipient's username" aria-describedby="button-addon2">
                <a href="/utils/defect/create/" class="btn btn-primary shadowed">Create Defect Form</a>
              </div>

            <table class="table" id="dtBasicExample">
                <thead>
                  <tr style="background-color:#212529;color:white;">
                    <th scope="col">CODE</th>
                    <th scope="col">DESCRIPTION</th>
                    <th scope="col">CATEGORY</th>
                    <th scope="col">CREATED BY</th>

                  </tr>
                </thead>
                <tbody id="myTable">
            {% for d in data %}
                    <tr onmouseover="bigImg(this)" onmouseout="normalImg(this)">
                        <td>{{ d.defect_code }}</td>
                        <td>{{ d.defect_description }}</td>
                        <td>{{ d.defect_category }}</td>
                        <td>{{ d.created_by }}</td>
                    </tr>
            {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}