{% extends "base.html" %}
{% block title %}My Profile{% endblock %}
{% block page_title %}My Profile{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header"><i class="bi bi-person-circle me-2"></i>Account Settings</div>
      <div class="card-body">
        <form method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
          <!-- Avatar placeholder -->
          <div class="text-center mb-4">
            <div style="width:80px;height:80px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;margin:0 auto 10px;">
              {{ current_user.full_name[0].upper() }}
            </div>
            <div style="font-size:12px;color:var(--muted);">{{ current_user.email }}</div>
            <div style="font-size:11px;background:rgba(0,180,216,.1);color:var(--accent3);display:inline-block;padding:2px 10px;border-radius:12px;margin-top:4px;">
              {{ current_user.role.replace('_',' ').upper() }}
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Full Name</label>
              <input type="text" class="form-control" name="full_name" value="{{ current_user.full_name }}" required/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Department</label>
              <input type="text" class="form-control" name="department" value="{{ current_user.department or '' }}"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone</label>
              <input type="text" class="form-control" name="phone" value="{{ current_user.phone or '' }}"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Username</label>
              <input type="text" class="form-control" value="{{ current_user.username }}" disabled/>
            </div>
          </div>

          <hr style="border-color:var(--border);margin:24px 0;"/>
          <h6 style="font-size:14px;font-weight:700;margin-bottom:16px;">Notification Preferences</h6>
          <div class="d-flex flex-column gap-2 mb-4">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
              <input type="checkbox" name="email_notif" {% if current_user.email_notif %}checked{% endif %}
                     style="accent-color:var(--accent3);width:16px;height:16px;"/>
              <span style="font-size:14px;"><i class="bi bi-envelope me-2" style="color:var(--accent3);"></i>Email Notifications</span>
            </label>
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
              <input type="checkbox" name="web_notif" {% if current_user.web_notif %}checked{% endif %}
                     style="accent-color:var(--accent3);width:16px;height:16px;"/>
              <span style="font-size:14px;"><i class="bi bi-bell me-2" style="color:var(--accent3);"></i>In-App Notifications</span>
            </label>
          </div>

          <hr style="border-color:var(--border);margin:24px 0;"/>
          <h6 style="font-size:14px;font-weight:700;margin-bottom:16px;">Change Password <span style="font-size:12px;color:var(--muted);font-weight:400;">(leave blank to keep current)</span></h6>
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label">New Password</label>
              <input type="password" class="form-control" name="new_password" placeholder="Min. 8 characters"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Confirm Password</label>
              <input type="password" class="form-control" name="confirm_password" placeholder="Repeat password"/>
            </div>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-2"></i>Save Changes</button>
            <a href="{{ url_for('tickets.dashboard') }}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}