{% set work = page.resume.work %}
{% if work %}
<section class="section" id="work-section">
  <header>
    <h2 class='section-title'><i class="fa-solid fa-suitcase"></i>{% trans %}resume work title{% endtrans %} <span class="item-count">({{ work | length }})</span></h2>
  </header>

  <section id="work">
    {% for work_item in work %}
    <section class="work-item">
      {% if work_item.name %}

      {% if work_item.summary %}
        {% if loop.first %}
        <input id="work-item-{{ loop.index }}" type="checkbox" class="toggle-item" checked="checked" />
        {% else %}
        <input id="work-item-{{ loop.index }}" type="checkbox" class="toggle-item" />
        {% endif %}
        <label for="work-item-{{ loop.index }}"></label>
      {% endif %}

      <header class="clear">
        <div class="flex">
          {% if work_item.position %}
            <div class="position">{{ work_item.position }}</div>
          {% endif %}
          <div class="date flex-grow text-right">
            {% if work_item.startDate %}
              <span class="startDate">{{ utils.format_date_short(work_item.startDate) }}</span>
            {% endif %}
            {% if not utils.isinfinite(work_item.endDate) %}
              <span class="endDate">- {{ utils.format_date_short(work_item.endDate) }}</span>
            {% else %}
              <span class="endDate">- {% trans %}resume present phrase{% endtrans %}</span>
            {% endif %}
          </div>
        </div>

	      <div class="company organization">
          <i class="fa-solid fa-building mr-2"></i>
          {{ work_item.name }}
          {% if work_item.url %}
            <span class="website">
              <a href="{{ work_item.url }}">(website)</a>
            </span>
          {% endif %} 
        </div>
      </header>
      {% endif %}

      {% if work_item.location %}
      <span class="location">
        <span class="fas fa-map-marker-alt"></span>
        <span class="city">{{ work_item.location }},</span>
      </span>
      {% endif %}

      {% if work_item.keywords %}
      <ul class="keywords">
        {% for  keyword in  keywords %}
        <li>{{ keyword }}</li>
        {% endfor %}
      </ul>
      {% endif %}
      <div class="item" id="work-item">
        {% if work_item.summary %}
        <div class="summary">{{ work_item.summary | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</div>
        {% endif %}
        {% if work_item.highlights %}
        <ul class="highlights grid grid-cols-4 gap-4">
          {% for  highlight in work_item.highlights %}
            <li>{{ highlight | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
    </section>
    {% endfor %}
  </section>
</section>
{% endif %}