<div id="{{ plugin_name }}-item-{{ entry.id }}" class="stack-small avoid-page-break">
  <div class="cluster timeline-header-cluster">
    <div class="timeline-header-title">
      {% if entry.company_url %}
        <h3><a class="underlined" href="{{ entry.company_url }}">{{ entry.company_name }}</a></h3>
      {% else %}
        <h3>{{ entry.company_name }}</h3>
      {% endif %}
      {% if entry.badges %}
        <ul class="cluster cluster-list job-badges-list">
          {% for badge in entry.badges %}
            <li>{{ badge }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
    <ul class="cluster cluster-list year-span">
      <li>{{ entry.start }}</li>
      <li>-</li>
      <li>{{ entry.end }}</li>
      {% if show_edit_button %}
        <div class="edit-icons">
        <svg class="edit-icon-small" hx-get="{{ entry.edit_url }}" hx-target="#{{ plugin_name }}-item-{{ entry.id }}" hx-swap="outerHTML">
          <use href="#edit"></use>
        </svg>
        <svg
          class="edit-icon-small"
          style="color: red !important;"
          hx-delete="{{ entry.delete_url }}"
          hx-target="#{{ plugin_name }}-item-{{ entry.id }}"
          hx-swap="delete"
        >
          <use href="#delete"></use>
        </svg>
        </div>
      {% endif %}
    </ul>
  </div>
  <div class="sub-line">{{ entry.role }}</div>
  <p>{{ entry.description|safe }}</p>
</div>
