{% extends "network/base.html" %}
{% block title %}Change Password — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Change Password</h1>
    <p class="page-subtitle">{{ current_user.username if current_user else 'User' }}</p>
  </div>
</div>

<section class="panel" style="max-width:440px;">
  {% if error %}
  <div style="background:rgba(233,69,96,0.15);border:1px solid var(--red);border-radius:6px;padding:8px 12px;margin:1rem;font-size:0.85rem;color:var(--red);">{{ error }}</div>
  {% endif %}
  {% if success %}
  <div style="background:rgba(39,174,96,0.15);border:1px solid var(--success);border-radius:6px;padding:8px 12px;margin:1rem;font-size:0.85rem;color:var(--success);">{{ success }}</div>
  {% endif %}

  <form method="POST" action="/network/change-password" style="padding:1rem;">
    <div class="form-grid" style="grid-template-columns:1fr;">
      <label>Current Password
        <input type="password" name="current_password" required autocomplete="current-password"/>
      </label>
      <label>New Password (min 8 characters)
        <input type="password" name="new_password" required minlength="8" autocomplete="new-password"/>
      </label>
      <label>Confirm New Password
        <input type="password" name="confirm_password" required minlength="8" autocomplete="new-password"/>
      </label>
    </div>
    <div class="form-actions" style="margin-top:1rem;">
      <button type="submit" class="btn btn-primary">Change Password</button>
      <a href="/network/" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</section>
{% endblock %}