{% extends 'employers/base_portal.html' %}
{% load static taxonomy_tags %}

{% block title %}Company Profile{% endblock %}
{% block topbar_title %}Company Profile{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{% static 'css/company-profile-edit.css' %}?v=5" />{% endblock %}
{% block extra_js %}{% industry_tree_script %}<script src="{% static 'js/industry-cascade.js' %}?v=1"></script>{% endblock %}

{% block dash_content %}
<div class="cp-page">

  <div class="cp-head">
    <div class="cp-head-text">
      <h1>Build your company's presence on PezaJob</h1>
      <p>Complete your company profile to help professionals discover your organisation, learn what you do and explore career opportunities with you. Your profile can appear in Find Companies, job adverts, search results and other areas of PezaJob.</p>
    </div>
    <div class="cp-progress-card">
      <div class="cp-progress-top">
        <span>Company profile completion</span>
        <strong>{{ progress.percent }}%</strong>
      </div>
      <div class="cp-bar" role="progressbar" aria-valuenow="{{ progress.percent }}" aria-valuemin="0" aria-valuemax="100"><span style="width:{{ progress.percent }}%"></span></div>
      <p class="cp-progress-note">{% if progress.percent == 100 %}Your profile is complete.{% else %}{{ progress.done_count }} of {{ progress.total }} steps done. A complete profile gives professionals more information about your company.{% endif %}</p>
      <a href="{{ company.get_absolute_url }}" target="_blank" rel="noopener" class="btn btn-primary btn-sm cp-preview"><i class="fas fa-eye"></i> View public profile</a>
    </div>
  </div>

  <div class="cp-layout">
    <nav class="cp-tabs" aria-label="Company profile sections">
      {% for s in sections %}
      <a href="{% url 'employers:edit_company' %}?section={{ s.key }}" class="cp-tab{% if s.key == section %} is-active{% endif %}">
        <i class="fas {{ s.icon }}"></i><span>{{ s.label }}</span>
        {% if s.done %}<i class="fas fa-circle-check cp-tab-done" title="Complete"></i>{% endif %}
      </a>
      {% endfor %}
    </nav>

    <div class="cp-main">
      {% if progress.missing and progress.percent < 100 %}
      <div class="cp-todo">
        <strong>Still to complete</strong>
        <div class="cp-todo-list">
          {% for m in progress.missing %}<a href="{% url 'employers:edit_company' %}?section={{ m.section }}">{{ m.label }}</a>{% endfor %}
        </div>
      </div>
      {% endif %}

      {% if section == 'info' %}
      {% include 'employers/company_profile/sections/info.html' %}
      {% elif section == 'about' %}
      {% include 'employers/company_profile/sections/about.html' %}
      {% elif section == 'products' %}
      {% include 'employers/company_profile/sections/products.html' %}
      {% elif section == 'locations' %}
      {% include 'employers/company_profile/sections/locations.html' %}
      {% elif section == 'contact' %}
      {% include 'employers/company_profile/sections/contact.html' %}
      {% elif section == 'careers' %}
      {% include 'employers/company_profile/sections/careers.html' %}
      {% elif section == 'brand' %}
      {% include 'employers/company_profile/sections/brand.html' %}
      {% elif section == 'gallery' %}
      {% include 'employers/company_profile/sections/gallery.html' %}
      {% elif section == 'preview' %}
      {% include 'employers/company_profile/sections/preview.html' %}
      {% elif section == 'verification' %}
      {% include 'employers/company_profile/sections/verification.html' %}
      {% endif %}
    </div>
  </div>
</div>
<script src="{% static 'js/company-profile-edit.js' %}?v=2"></script>
{% endblock %}