{% extends 'accounts/base_auth.html' %}
{% load static %}

{% block title %}Register – PEZAJOB{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'vendor/css/fonts.css' %}" />
<style>
:root{--primary:#2c3e50;--secondary:#d1cf0a;--bg:#f0f4f8;--text:#1a2332;--white:#fff;--border:#dde3ea;--font-main:'Quicksand',sans-serif;--font-display:'Quicksand', sans-serif;}
html,body{margin:0;padding:0;}
body{display:block;background:var(--bg);font-family:var(--font-main);}
.reg-header{background:var(--primary);padding:20px 40px;display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.logo:hover,.logo:visited,.logo:focus{text-decoration:none;color:inherit;}
.logo-icon{width:44px;height:44px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(209,207,10,0.22);border:2px solid rgba(209,207,10,0.28);}
.logo-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--white);text-decoration:none;}
.logo-text span{color:var(--secondary);}
.header-link{color:rgba(255,255,255,.7);font-size:.87rem;margin:0;}
.header-link a{color:var(--secondary);font-weight:700;text-decoration:none;}
.header-link a:hover{text-decoration:underline;}
.reg-container{max-width:860px;margin:48px auto;padding:0 24px 80px;}
.reg-title{text-align:center;margin-bottom:36px;}
.reg-title h1{font-family:var(--font-display);font-size:2rem;color:var(--primary);margin-bottom:8px;}
.type-tabs{display:flex;gap:16px;margin-bottom:36px;}
.type-tab{flex:1;border:2px solid var(--border);border-radius:14px;padding:24px;cursor:pointer;background:var(--white);text-align:center;text-decoration:none;color:inherit;}
.type-tab.active{border-color:var(--primary);background:rgba(44,62,80,.03);}
.type-tab i{font-size:2rem;color:#bbb;margin-bottom:12px;display:block;}
.type-tab.active i{color:var(--primary);}
.reg-card{background:var(--white);border-radius:16px;padding:40px;box-shadow:0 4px 24px rgba(44,62,80,.08);}
.reg-card h2{font-family:var(--font-display);font-size:1.25rem;color:var(--primary);margin:0 0 28px;display:flex;align-items:center;gap:10px;}
.reg-card form{width:100%;}
*,*::before,*::after{box-sizing:border-box;}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:28px;width:100%;}
.col-span-2{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0;width:100%;}
.form-group label{font-size:.83rem;font-weight:600;color:var(--primary);line-height:1.3;}
.req{color:#e74c3c;}
.reg-card input[type="text"],
.reg-card input[type="email"],
.reg-card input[type="password"],
.reg-card input[type="tel"],
.reg-card input[type="search"],
.reg-card select,
.reg-card textarea,
.reg-input{
  width:100%;max-width:100%;display:block;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;
  font-family:var(--font-main);background:#fff;color:var(--text);
  box-shadow:0 1px 2px rgba(44,62,80,.04);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.reg-card input[type="text"]:focus,
.reg-card input[type="email"]:focus,
.reg-card input[type="password"]:focus,
.reg-card input[type="tel"]:focus,
.reg-card select:focus,
.reg-card textarea:focus,
.reg-input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(44,62,80,.08);}
.form-errors{background:#fdecea;border:1px solid #f5c6cb;color:#c0392b;padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:.85rem;}
.field-error{color:#c0392b;font-size:.78rem;}
.terms-check{display:flex;align-items:flex-start;gap:10px;margin-top:4px;font-size:.83rem;color:#555;line-height:1.5;}
.terms-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--primary);}
.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:28px;padding-top:20px;border-top:1px solid var(--border);}
.btn-sec,.btn-pri{padding:12px 28px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.btn-sec{border:1.5px solid var(--border);background:#fff;color:#666;}
.btn-pri{background:var(--primary);color:#fff;border:none;}
@media(max-width:640px){
  .form-grid{grid-template-columns:1fr;row-gap:20px;}
  .type-tabs{flex-direction:column;}
  .reg-header{padding:16px 20px;flex-wrap:wrap;gap:12px;}
  .reg-card{padding:28px 22px;}
}
</style>
{% endblock %}

{% block body %}
<header class="reg-header">
  <a href="{% url 'home:index' %}" class="logo">
    <div class="logo-icon">
      <img src="{% static 'images/Logo_circle_clean.png' %}" alt="PEZAJOB Logo" />
    </div>
    <div class="logo-text">PEZA<span>JOB</span></div>
  </a>
  <p class="header-link"><span class="header-link-text">Already have an account?</span> <a href="{% url 'accounts:login' %}{% if next %}?next={{ next|urlencode }}{% endif %}">Sign In</a></p>
</header>

<div class="reg-container">
  <div class="reg-title">
    <h1>Create Your Account</h1>
    <p>Create a free account to apply for jobs or post vacancies</p>
  </div>

  <div class="type-tabs">
    <a href="{% url 'accounts:register' %}?type=seeker{% if next %}&amp;next={{ next|urlencode }}{% endif %}" class="type-tab{% if account_type == 'seeker' %} active{% endif %}">
      <i class="fas fa-user-tie"></i>
      <h3>I'm a Job Seeker</h3>
      <p>Find your dream job and showcase your talent</p>
    </a>
    <a href="{% url 'accounts:register' %}?type=company{% if next %}&amp;next={{ next|urlencode }}{% endif %}" class="type-tab{% if account_type == 'company' %} active{% endif %}">
      <i class="fas fa-building"></i>
      <h3>I'm an Employer</h3>
      <p>Post jobs and find the best talent in Zambia</p>
    </a>
  </div>

  <div class="reg-card">
    {% if account_type == 'company' %}
    <h2><i class="fas fa-building"></i> Employer Registration</h2>
    <form method="post" novalidate>
      {% csrf_token %}
      <input type="hidden" name="account_type" value="company">
      {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
      {% if active_form.non_field_errors %}<div class="form-errors" role="alert">{{ active_form.non_field_errors }}</div>{% endif %}
      <div class="form-grid">
        <div class="form-group col-span-2">
          <label for="{{ active_form.company_name.id_for_label }}">Company Name <span class="req">*</span></label>
          {{ active_form.company_name }}
          {% if active_form.company_name.errors %}<div class="field-error">{{ active_form.company_name.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group col-span-2">
          <label for="{{ active_form.contact_person.id_for_label }}">Contact Person <span class="req">*</span></label>
          {{ active_form.contact_person }}
          {% if active_form.contact_person.errors %}<div class="field-error">{{ active_form.contact_person.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.email.id_for_label }}">Company Email <span class="req">*</span></label>
          {{ active_form.email }}
          {% if active_form.email.errors %}<div class="field-error">{{ active_form.email.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.phone.id_for_label }}">Phone Number</label>
          {{ active_form.phone }}
        </div>
        <div class="form-group">
          <label for="{{ active_form.password1.id_for_label }}">Password <span class="req">*</span></label>
          {{ active_form.password1 }}
          {% if active_form.password1.errors %}<div class="field-error">{{ active_form.password1.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.password2.id_for_label }}">Confirm Password <span class="req">*</span></label>
          {{ active_form.password2 }}
          {% if active_form.password2.errors %}<div class="field-error">{{ active_form.password2.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group col-span-2">
          <div class="terms-check">
            {{ active_form.accept_terms }}
            <label for="{{ active_form.accept_terms.id_for_label }}">I agree to the <a href="{% url 'home:terms' %}" target="_blank" rel="noopener">Terms of Service</a> and <a href="{% url 'home:privacy' %}" target="_blank" rel="noopener">Privacy Policy</a>.</label>
          </div>
          {% if active_form.accept_terms.errors %}<div class="field-error">{{ active_form.accept_terms.errors.0 }}</div>{% endif %}
        </div>
      </div>
      <div class="form-actions">
        <a href="{% url 'accounts:login' %}{% if next %}?next={{ next|urlencode }}{% endif %}" class="btn-sec">I already have an account</a>
        <button type="submit" class="btn-pri">Register Company <i class="fas fa-arrow-right"></i></button>
      </div>
    </form>
    {% else %}
    <h2><i class="fas fa-user-circle"></i> Job Seeker Registration</h2>
    <form method="post" novalidate>
      {% csrf_token %}
      <input type="hidden" name="account_type" value="seeker">
      {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
      {% if active_form.non_field_errors %}<div class="form-errors" role="alert">{{ active_form.non_field_errors }}</div>{% endif %}
      <div class="form-grid">
        <div class="form-group">
          <label for="{{ active_form.first_name.id_for_label }}">First Name <span class="req">*</span></label>
          {{ active_form.first_name }}
          {% if active_form.first_name.errors %}<div class="field-error">{{ active_form.first_name.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.last_name.id_for_label }}">Last Name <span class="req">*</span></label>
          {{ active_form.last_name }}
          {% if active_form.last_name.errors %}<div class="field-error">{{ active_form.last_name.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.email.id_for_label }}">Email Address <span class="req">*</span></label>
          {{ active_form.email }}
          {% if active_form.email.errors %}<div class="field-error">{{ active_form.email.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.phone.id_for_label }}">Phone Number</label>
          {{ active_form.phone }}
        </div>
        <div class="form-group">
          <label for="{{ active_form.password1.id_for_label }}">Password <span class="req">*</span></label>
          {{ active_form.password1 }}
          {% if active_form.password1.errors %}<div class="field-error">{{ active_form.password1.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group">
          <label for="{{ active_form.password2.id_for_label }}">Confirm Password <span class="req">*</span></label>
          {{ active_form.password2 }}
          {% if active_form.password2.errors %}<div class="field-error">{{ active_form.password2.errors.0 }}</div>{% endif %}
        </div>
        <div class="form-group col-span-2">
          <div class="terms-check">
            {{ active_form.accept_terms }}
            <label for="{{ active_form.accept_terms.id_for_label }}">I agree to the <a href="{% url 'home:terms' %}" target="_blank" rel="noopener">Terms of Service</a> and <a href="{% url 'home:privacy' %}" target="_blank" rel="noopener">Privacy Policy</a>.</label>
          </div>
          {% if active_form.accept_terms.errors %}<div class="field-error">{{ active_form.accept_terms.errors.0 }}</div>{% endif %}
        </div>
      </div>
      <div class="form-actions">
        <a href="{% url 'accounts:login' %}{% if next %}?next={{ next|urlencode }}{% endif %}" class="btn-sec">I already have an account</a>
        <button type="submit" class="btn-pri">Create Account <i class="fas fa-arrow-right"></i></button>
      </div>
    </form>
    {% endif %}
  </div>
</div>
{% endblock %}