{% extends "../base.html" %}
{% load crispy_forms_tags %}

{% block page_title %}Assessment Type{% endblock page_title %}
{% block content %}
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
            <div class="x_title">
                <h2><i class="fa fa-clipboard-list"></i> Assessment Types</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">

                <div class="comm-header">
                    <div class="comm-intro">
                        <div class="comm-title">Manage assessment types used in grading and reports.</div>
                        <div class="text-muted">Define weights that contribute to total scores.</div>
                    </div>
                    <div class="comm-actions">
                        {% if active_role != "Class Teacher" and request.user.staff_account.role.name != "Class Teacher" %}
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
                            <i class="fa fa-plus"></i> Add Assessment Type
                        </button>
                        {% endif %}
                    </div>
                </div>

             {% if assesment_type %}
                <table id="datatable-checkbox" class="table table-striped table-bordered datatable" style="width:100%">
                <thead>
                    <tr>
                    <th style="width:80px;">ID</th>
                    <th>Name</th>
                    <th style="width:140px;">Weight</th>
                    {% if active_role != "Class Teacher" and request.user.staff_account.role.name != "Class Teacher" %}
                    <th style="width:140px;">Actions</th>
                    {% endif %}
                    </tr>
                </thead>
                <tbody>
                    {% for assesment_type in assesment_type %}
                    <tr>
                        <td>{{ assesment_type.id }}</td>
                        <td>{{ assesment_type.name }}</td>
                        <td><span class="badge badge-info">{{ assesment_type.weight }}</span></td>
                        {% if active_role != "Class Teacher" and request.user.staff_account.role.name != "Class Teacher" %}
                        <td>
                            <a href="{% url 'edit_assesment_type' assesment_type.id %}" class="btn btn-sm btn-primary" title="Edit">
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="{% url 'delete_assesment_type' assesment_type.id %}" class="btn btn-sm btn-danger" title="Delete" onclick="return confirm('Are you sure you want to delete this field?')">
                                <i class="fa fa-trash-o"></i>
                            </a>
                        </td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
                {% else %}
                <div class="empty-state text-center" style="padding:24px;">
                    <i class="fa fa-folder-open" style="font-size:32px; color:#aaa;"></i>
                    <h4 style="margin-top:12px;">No Assessment Types Available</h4>
                    <p class="text-muted">Use the “Add Assessment Type” button to create one.</p>
                </div>
                {% endif %}

            </div>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">

            <div class="modal-header bg-primary text-white">
              <h4 class="modal-title" id="myModalLabel"><i class="fa fa-plus"></i> Add Assessment Type</h4>
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
                <form method="POST">
                    {% csrf_token %}
                    {{form|crispy}}
            </div>
             <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>

      </div>
    </div>
  </div>

<style>
  .comm-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    background:#f8fafc;
    border:1px solid #e6edf5;
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  .comm-title{font-weight:600;color:#334155;margin-bottom:4px;}
  .comm-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
</style>
{% endblock content%}