{% extends 'base.html' %}
{% block title %}Change State - {{ evidence.evidence_number }}{% endblock %}
{% block content %}
<div class="topbar">
  <span class="page-title">
    Change Evidence State: {{ evidence.evidence_number }}
  </span>
  <a href="{{ url_for('evidence.view_evidence', case_id=evidence.case_id, evidence_id=evidence.id) }}"
     class="btn btn-outline-secondary btn-sm">Back</a>
</div>

<div class="card" style="max-width:560px;">
  <div class="card-body p-4">
    <div class="alert alert-info py-2 small mb-4">
      <i class="bi bi-info-circle me-1"></i>
      Current state: <strong>{{ evidence.lifecycle_state }}</strong>.
      Only legally valid transitions for your role are shown below.
    </div>

    {% if available_transitions %}
    <form method="POST">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <div class="mb-3">
        <label class="form-label fw-semibold small">
          Target State <span class="text-danger">*</span>
        </label>
        <select name="target_state" class="form-select" required>
          <option value="">- Select a state -</option>
          {% for state in available_transitions %}
          <option value="{{ state }}">{{ state }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="mb-4">
        <label class="form-label fw-semibold small">
          Justification <span class="text-muted">(recommended)</span>
        </label>
        <textarea name="justification" class="form-control" rows="3"
                  placeholder="Explain why you are changing the state..."></textarea>
      </div>
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary fw-semibold">
          Apply Transition
        </button>
        <a href="{{ url_for('evidence.view_evidence', case_id=evidence.case_id, evidence_id=evidence.id) }}"
           class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
    {% else %}
    <div class="alert alert-warning py-2 small">
      <i class="bi bi-lock me-1"></i>
      No valid state transitions are available for your role at this time.
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}