{% load static %}


{% for data in data_subsection %}
  <div class="{{ data.section_css }}">
    {% if data.section.title %}
      <h3>{{ data.section.title }}</h3>
    {% endif %}

    {% if data.section_header %}
      <p>{{ data.section_header }}</p>
    {% endif %}

    {% if data.section_key_value_pairs %}
      <ul>
        {% for key_value in data.section_key_value_pairs %}
          <li>
            <p>
              <span class="bold">{{ key_value.data_key }}</span>:
              {{ key_value.data_value }}
            </p>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if data.section_items %}
      <ul>
        {% for data_item in data.section_items %}
          {% if data_item.title_left or data_item.title_right %}
            <h4>
              {% if data_item.title_left %}
                <span class="align-left">{{ data_item.title_left }}</span>
              {% endif %}
              {% if data_item.title_right %}
                <span class="align-right">{{ data_item.title_right }}</span>
              {% endif %}
            </h4>
          {% endif %}
          <li {% if not show_bullet_point %}class="no-bullet"{% endif %}>
            <p>{{ data_item.item }}</p>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% include 'resume_manager/_display_recurse.html' with data_subsection=data.section_children %}
  </div>
{% endfor %}