{% extends "base.html" %}
{% load static %}
{% block title %}Material Management{% endblock %}

{% block extra_css %}
    <link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">Material Management</div>
    <div class="ms-auto">
        <a href="{% url 'material-create' %}" class="btn btn-primary">Add New Material</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table id="material_table" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for material in materials %}
                    <tr>
                        <td>{{ material.material_name }}</td>
                        <td>
                            {% if material.status == 'active' %}
                                <span class="badge bg-success">Active</span>
                            {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <a href="{% url 'material-edit' material.pk %}" class="btn btn-sm btn-warning"><i class="bi bi-pencil"></i></a>
                                <form action="{% url 'material-delete' material.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this material?');">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('#material_table').DataTable();
        });
    </script>
{% endblock %}