{% extends 'base.html' %}
{% block content %}
<div class="row g-4">
  <div class="col-xl-4">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white"><h5 class="fw-bold mb-0">Input Akreditasi</h5></div>
      <div class="card-body">
        {% if current_user.role in ['super_admin', 'admin'] %}
        <form method="post" class="row g-3">
          <div class="col-12"><input class="form-control" name="criterion" placeholder="Kriteria" required></div>
          <div class="col-12"><input class="form-control" name="indicator" placeholder="Indikator" required></div>
          <div class="col-12"><textarea class="form-control" name="description" placeholder="Deskripsi"></textarea></div>
          <div class="col-md-6"><input class="form-control" type="number" name="target" placeholder="Target" value="100"></div>
          <div class="col-md-6"><input class="form-control" type="number" name="progress" placeholder="Progress" value="0"></div>
          <div class="col-md-6"><input class="form-control" name="pic" placeholder="PIC"></div>
          <div class="col-md-6">
            <select class="form-select" name="status">
              <option>Draft</option><option>Review</option><option>Valid</option>
            </select>
          </div>
          <div class="col-12"><button class="btn btn-primary w-100">Simpan</button></div>
        </form>
        {% else %}
        <p class="text-secondary mb-0">Pimpinan hanya dapat melihat monitoring.</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-xl-8">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white"><h5 class="fw-bold mb-0">Daftar Kriteria dan Indikator</h5></div>
      <div class="card-body table-responsive">
        <table class="table align-middle">
          <thead><tr><th>Kriteria</th><th>Indikator</th><th>Progress</th><th>Status</th><th>PIC</th></tr></thead>
          <tbody>
            {% for item in items %}
            <tr>
              <td>{{ item.criterion }}</td>
              <td>{{ item.indicator }}<div class="small text-secondary">{{ item.description }}</div></td>
              <td style="min-width:180px">
                <div class="progress"><div class="progress-bar" style="width: {{ item.progress }}%">{{ item.progress }}%</div></div>
              </td>
              <td><span class="badge text-bg-light border">{{ item.status }}</span></td>
              <td>{{ item.pic }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}