{% extends "base.html" %}
{% block title %}Preview Diff - {{ device.name }}{% endblock %}
{% block content %}
<h1>Preview Changes — {{ device.name }}</h1>

<div class="card">
  <h2>Diff (candidate vs. active)</h2>
  <div class="diff-view">
    {% for line in diff.splitlines() %}
      {% if line.startswith('+') %}
        <div class="diff-add">{{ line }}</div>
      {% elif line.startswith('-') %}
        <div class="diff-remove">{{ line }}</div>
      {% else %}
        <div class="diff-context">{{ line }}</div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<div class="card">
  <form method="post" action="{{ url_for('config_mgmt.commit_config', device_id=device.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <textarea name="config_lines" hidden>{{ config_lines }}</textarea>
    <textarea name="expected_diff" hidden>{{ diff }}</textarea>
    <div class="form-group">
      <label for="comment">Commit comment</label>
      <input type="text" id="comment" name="comment" placeholder="Describe this change">
    </div>
    <div class="form-group">
      <label for="confirm_minutes">Safety timer — auto-revert after N minutes unless confirmed</label>
      <input type="number" id="confirm_minutes" name="confirm_minutes" min="1" max="60" placeholder="e.g. 5 (leave blank for a normal, permanent commit)">
      <div class="hint">Recommended for risky changes on a live device (policers, filters, ACLs). If you lose connectivity, the device automatically reverts on its own after the timer expires.</div>
    </div>
    <button type="submit" class="btn btn-primary">Commit</button>
    <a href="javascript:history.back()" class="btn">Edit again</a>
  </form>
</div>
{% endblock %}