{% extends 'base.html' %}
{% load widget_tweaks %}
{% block title %}Settings — CampusTalent{% endblock %}

{% block content %}
<div class="page-content">
<div class="container-sm">

  <div style="margin-bottom:2rem">
    <h1 style="font-size:1.75rem;margin-bottom:0.25rem">Account Settings</h1>
    <p style="color:var(--text-muted)">Manage your profile information and preferences</p>
  </div>

  <div class="grid-2" style="gap:2rem;align-items:start">

    <!-- Main settings -->
    <div>
      <div class="card card-accent" style="margin-bottom:1.5rem">
        <h3 class="card-title" style="margin-bottom:1.25rem">Personal Information</h3>
        <form method="post">
          {% csrf_token %}

          <div class="grid-2" style="gap:1rem">
            <div class="form-group">
              <label class="form-label">First Name</label>
              {{ form.first_name|add_class:"form-input" }}
            </div>
            <div class="form-group">
              <label class="form-label">Last Name</label>
              {{ form.last_name|add_class:"form-input" }}
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Email Address</label>
            <input type="email" value="{{ user.email }}" class="form-input" disabled
                   style="background:var(--bg);cursor:not-allowed;opacity:0.7">
            <div class="form-hint">Email cannot be changed here. <a href="{% url 'account_email' %}" style="color:var(--primary)">Manage emails →</a></div>
          </div>

          <div class="form-group">
            <label class="form-label">University</label>
            {{ form.university|add_class:"form-input" }}
          </div>

          <div class="form-group">
            <label class="form-label">Field of Study</label>
            {{ form.field_of_study|add_class:"form-input" }}
          </div>

          <div class="form-group">
            <label class="form-label">Phone Number</label>
            {{ form.phone|add_class:"form-input" }}
          </div>

          <div class="form-group">
            <label class="form-label">Interests</label>
            {{ form.interests|add_class:"form-textarea" }}
            <div class="form-hint">Hobbies, causes, areas you want to explore</div>
          </div>

          <div class="form-group">
            <label class="form-label">Contact Preference</label>
            <select name="contact_preference" class="form-select">
              <option value="email" {% if user.contact_preference == 'email' %}selected{% endif %}>Email only</option>
              <option value="phone" {% if user.contact_preference == 'phone' %}selected{% endif %}>Phone only</option>
              <option value="both" {% if user.contact_preference == 'both' %}selected{% endif %}>Both email & phone</option>
            </select>
          </div>

          <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
      </div>

      <!-- Password change -->
      <div class="card">
        <h3 class="card-title" style="margin-bottom:0.75rem">Password & Security</h3>
        <p style="color:var(--text-muted);font-size:0.875rem;margin-bottom:1rem">Manage your password and account security settings.</p>
        <div style="display:flex;gap:0.75rem;flex-wrap:wrap">
          <a href="{% url 'account_change_password' %}" class="btn btn-outline btn-sm">Change Password</a>
          <a href="{% url 'socialaccount_connections' %}" class="btn btn-ghost btn-sm">Manage Social Accounts</a>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Profile quick actions -->
      <div class="card card-teal">
        <div style="text-align:center;margin-bottom:1.25rem">
          {% if user.profile.photo %}
            <img src="{{ user.profile.photo.url }}" class="avatar avatar-xl" style="margin:0 auto 0.75rem;border:3px solid var(--border)">
          {% else %}
            <div class="avatar avatar-xl avatar-placeholder" style="margin:0 auto 0.75rem">
              {{ user.first_name|first|upper }}{{ user.last_name|first|upper }}
            </div>
          {% endif %}
          <div style="font-weight:700">{{ user.get_full_name }}</div>
          <div style="font-size:0.8rem;color:var(--text-muted)">{{ user.email }}</div>
        </div>
        <a href="{% url 'profiles:edit' %}" class="btn btn-primary btn-sm btn-block" style="margin-bottom:0.5rem">Edit Profile</a>
        <a href="{% url 'profiles:my_profile' %}" class="btn btn-ghost btn-sm btn-block">View Public Profile</a>
      </div>

      <!-- Danger zone -->
      <div class="card" style="border-color:rgba(239,68,68,0.2)">
        <h4 style="color:var(--danger);margin-bottom:0.75rem;font-size:0.95rem">Danger Zone</h4>
        <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1rem">
          Permanently delete your account and all your data.
        </p>
        <a href="{% url 'account_logout' %}" class="btn btn-danger btn-sm">Sign Out</a>
      </div>
    </div>

  </div>
</div>
</div>
{% endblock %}