{% extends "var_cms/base.html" %}

{% block page_title %}{{ title }}{% endblock %}

{% block content %}
<div style="max-width: 560px; margin: 0 auto;">
  <div class="card" style="padding: 32px;">
    <h3 style="font-family: var(--fh); font-weight: 700; font-size: 18px; margin-bottom: 8px; color: var(--text);">Update Your Password</h3>
    <p style="color: var(--text-dim); font-size: 13px; margin-bottom: 24px;">
      Change the password you use to sign in to the control panel.
    </p>

    {% if error_msg %}
      <div style="background: hsla(347, 87%, 60%, 0.12); border: 1px solid var(--red); color: var(--red); padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; font-weight: 500;">
        <i data-lucide="alert-circle" style="width:16px;height:16px;flex-shrink:0;"></i>
        <span>{{ error_msg }}</span>
      </div>
    {% endif %}

    {% if success_msg %}
      <div style="background: hsla(142, 72%, 45%, 0.12); border: 1px solid var(--green); color: var(--green); padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; font-weight: 500;">
        <i data-lucide="check-circle" style="width:16px;height:16px;flex-shrink:0;"></i>
        <span>{{ success_msg }}</span>
      </div>
    {% endif %}

    <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
      {% csrf_token %}
      
      <div style="display: flex; flex-direction: column; gap: 6px;">
        <label style="font-size: 12.5px; font-weight: 600; color: var(--text-dim);" for="old_password">Current Password</label>
        <div style="position: relative; display: flex; align-items: center;">
          <i data-lucide="key-round" style="position: absolute; left: 14px; color: var(--text-dim); width: 15px; height: 15px; pointer-events: none;"></i>
          <input type="password" name="old_password" id="old_password" style="width: 100%; padding: 10px 16px 10px 40px; background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13.5px; outline: none; transition: var(--transition);" placeholder="Enter current password" required />
        </div>
      </div>

      <div style="display: flex; flex-direction: column; gap: 6px;">
        <label style="font-size: 12.5px; font-weight: 600; color: var(--text-dim);" for="new_password">New Password</label>
        <div style="position: relative; display: flex; align-items: center;">
          <i data-lucide="lock" style="position: absolute; left: 14px; color: var(--text-dim); width: 15px; height: 15px; pointer-events: none;"></i>
          <input type="password" name="new_password" id="new_password" style="width: 100%; padding: 10px 16px 10px 40px; background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13.5px; outline: none; transition: var(--transition);" placeholder="Enter new password (min. 6 characters)" required />
        </div>
      </div>

      <div style="display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;">
        <label style="font-size: 12.5px; font-weight: 600; color: var(--text-dim);" for="confirm_password">Confirm New Password</label>
        <div style="position: relative; display: flex; align-items: center;">
          <i data-lucide="lock" style="position: absolute; left: 14px; color: var(--text-dim); width: 15px; height: 15px; pointer-events: none;"></i>
          <input type="password" name="confirm_password" id="confirm_password" style="width: 100%; padding: 10px 16px 10px 40px; background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13.5px; outline: none; transition: var(--transition);" placeholder="Confirm new password" required />
        </div>
      </div>

      <div style="display: flex; gap: 12px; margin-top: 8px;">
        <button type="submit" class="btn btn-primary">Update Password</button>
        <a href="{% url 'var_cms:var_cms_index' %}" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}