{% extends "website/base.html" %}
{% block content %}

<section class="section">
  <div class="card">
    <div class="badges">
      <span class="badge">Recruitment</span>
      <span class="badge">Professional team</span>
      <span class="badge">Ethical standards</span>
    </div>
    <h1 class="h1" style="margin-top:10px">Careers</h1>
    <p class="p">
      We welcome dedicated nurses and caregivers who are passionate about making a difference. Apply below and upload your CV.
      Shortlisted candidates will be contacted.
    </p>
  </div>
</section>

<section class="section">
  <div class="grid grid-2">
    <div class="card">
      <div class="card-title">
        <div class="icon">🧑🏽‍⚕️</div>
        <div>
          <h2 class="h2" style="margin:0">Open Positions</h2>
          <div class="small">Current opportunities</div>
        </div>
      </div>
      <div class="sep"></div>

      {% if positions %}
        <div class="grid" style="gap:12px">
          {% for p in positions %}
            <div class="card soft card-tight">
              <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap">
                <div>
                  <div style="font-weight:900">{{ p.title }}</div>
                  <div class="small">{{ p.get_role_type_display }}{% if p.location %} • {{ p.location }}{% endif %}</div>
                </div>
                <span class="chip">Open</span>
              </div>
              <div class="sep"></div>
              <div class="small" style="white-space:pre-line">{{ p.requirements }}</div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="notice">
          No open positions yet. Please check again soon.
        </div>
      {% endif %}

      <div class="sep"></div>
      <div class="small">
        <b>Minimum expectations:</b> professionalism, compassion, confidentiality, and respect for clients.
      </div>
    </div>

    <div class="card">
      <div class="card-title">
        <div class="icon">📄</div>
        <div>
          <h2 class="h2" style="margin:0">Apply Now</h2>
          <div class="small">Upload your CV and submit your details</div>
        </div>
      </div>

      <div class="sep"></div>

      <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% for field in form %}
          <label class="label">{{ field.label }}</label>
          {{ field }}
          {% if field.help_text %}<div class="help">{{ field.help_text }}</div>{% endif %}
          {% for error in field.errors %}<div class="help" style="color:#b91c1c;font-weight:800">{{ error }}</div>{% endfor %}
        {% endfor %}

        <div class="sep"></div>

        <div style="display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn btn-accent" type="submit">Submit Application</button>
          <a class="btn" href="https://wa.me/{{ SITE_WHATSAPP }}?text=Hello%20Holistic%20Caregiver%20Services%20Ltd%2C%20I%20want%20to%20apply%20as%20a%20caregiver%2Fnurse." target="_blank">Ask on WhatsApp</a>
        </div>

        <div class="help" style="margin-top:10px">
          By submitting, you confirm your information is accurate and consent to being contacted for recruitment purposes.
        </div>
      </form>
    </div>
  </div>
</section>

{% endblock %}