{% extends 'LayoutMain.html' %}
{% load static %}
{% block title %}Edit User Group{% endblock %}

{% block content %}
<main id="main" class="main">
  <div style="padding: 1.5rem 0;">

    <div class="pagetitle">
      <h1>User</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{% url 'index' %}">Edit User Group</a></li>
        </ol>
      </nav>
    </div><!-- End Page Title -->



    <form method="POST">
      {% csrf_token %}

      <div class="card shadow-sm mb-3">
        <div class="card-header d-flex align-items-center gap-2">
          <div>
            <h5 class="mb-0 text-white">User Group Details</h5>

          </div>
        </div>

        <div class="card-body">

          

          <div class="mb-3">
            <label class="form-label fw-semibold">
              Name <span class="text-danger">*</span>
            </label>
            <input type="text" name="name" class="form-control {% if form.name.errors %}is-invalid{% endif %}"
              value="{{ form.name.value|default:usergroup.name }}" {# ✅ shows current name #}
              placeholder="Enter group name">
            {% if form.name.errors %}
            <div class="invalid-feedback">{{ form.name.errors|join:", " }}</div>
            {% endif %}
          </div>



        </div>
      </div>

      <div class="d-flex gap-2 pt-2">
        <button type="submit" class="btn text-white fw-semibold btn-primary">
          <i class="bi bi-check-lg me-1"></i> Save Changes
        </button>
        <a href="{% url 'usergroup' %}" class="btn btn-outline-secondary">Cancel</a>
      </div>

    </form>

  </div>
</main>
{% endblock %}