{% extends "base.html" %}
{% block content %}
<div class="breadcrumb-bar"><a href="/changes">Changes</a> / {{ change.change_number }}</div>
<div class="page-header">
  <h1>{{ change.change_number }} — {{ change.title }}</h1>
  <div>
    {% if change.status.value == 'Planned' and current_user.has_permission('changes.approve') %}
      <form method="post" action="/changes/{{ change.id }}/approve"><button class="btn btn-outline-success btn-sm">Approve</button></form>
    {% endif %}
  </div>
</div>
<div class="row g-3">
  <div class="col-lg-8">
    <div class="card-panel mb-3">
      <dl class="row mb-0">
        <dt class="col-sm-3">Type</dt><dd class="col-sm-9">{{ change.change_type.value }}</dd>
        <dt class="col-sm-3">Server</dt><dd class="col-sm-9">{{ change.server_hostname or '—' }}</dd>
        <dt class="col-sm-3">Service</dt><dd class="col-sm-9">{{ change.service or '—' }}</dd>
        <dt class="col-sm-3">Reason</dt><dd class="col-sm-9">{{ change.reason or '—' }}</dd>
        <dt class="col-sm-3">Risk</dt><dd class="col-sm-9">{{ change.risk or '—' }}</dd>
      </dl>
    </div>
    <div class="card-panel mb-3"><h2 class="h6">Current Configuration</h2><p class="mb-0">{{ change.current_configuration }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Proposed Configuration</h2><p class="mb-0">{{ change.proposed_configuration }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Implementation Steps</h2><p class="mb-0">{{ change.implementation_steps }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Verification</h2><p class="mb-0">{{ change.verification }}</p></div>
    <div class="card-panel"><h2 class="h6">Rollback Plan</h2><p class="mb-0">{{ change.rollback_plan }}</p></div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel mb-3">
      <p class="mb-1"><strong>Status:</strong> {{ change.status.value }}</p>
      {% if current_user.has_permission('changes.edit') %}
      <form method="post" action="/changes/{{ change.id }}/status" class="d-flex gap-2">
        <select name="status" class="form-select form-select-sm">
          {% for s in ['Planned','Approved','In Progress','Completed','Rolled Back','Cancelled'] %}
            <option value="{{ s }}" {{ 'selected' if change.status.value == s }}>{{ s }}</option>
          {% endfor %}
        </select>
        <button class="btn btn-sm btn-outline-primary">Update</button>
      </form>
      {% endif %}
    </div>
    <div class="card-panel">
      <p class="mb-1"><strong>Requested By:</strong> {{ change.requested_by.full_name if change.requested_by else '—' }}</p>
      <p class="mb-0"><strong>Approved By:</strong> {{ change.approved_by.full_name if change.approved_by else '—' }}</p>
    </div>
  </div>
</div>
{% endblock %}