<div class="card-header rounded flex flex-col p-2 text-sm font-normal">
  <div class="flex justify-between w-full">
    <div class="flex flex-col truncate gap-1">
      <div class="text-gray-400">{{ item.CUSTOMER.name }}</div>
      <div class="font-bold">{{ item.identifier }} {{ item.title }}</div>
      <div>
        <span class="badge badge-small badge-blue">DEV: {{ item.MAIN_DEVELOPER.nick }}</span>
        <span class="badge badge-small badge-green">PM: {{ item.PROJECT_MANAGER.nick }}</span>
      </div>
      {% if item.MILESTONES|length <= 0 %}
        <div class="text-red-800">{{ translate('Project has no milestones.') }}</div>
      {% else %}
        {% for m in item.MILESTONES %}
          {% if not m.is_closed %} 
            <a
              class="btn btn-transparent {{ (m.REPORTS|first).progress_percent == 100 ? "text-gray-600" : "text-violet-600" }}"
              href="{{ hubleto.env().projectUrl }}/projects/milestones/{{ m.id }}"
              target="_blank"
            >
              <span class="icon"><i class="fas fa-calendar-check"></i></span>
              <span class="text">
                {{ hubleto.locale().formatDateShort(m.date_due) }}
                {{ m.title }}
                {% if m.REPORTS|length > 0 %}
                  ({{ translate('progress') }} {{ (m.REPORTS|first).progress_percent }} % {{ translate('reported on') }} {{ hubleto.locale().formatDateShort((m.REPORTS|first).date_report) }})
                {% else %}
                  ({{ translate('no report yet') }})
                {% endif %}
              </span>
            </a>
          {% endif %}
          {% if m.is_closed %}
            <div class="badge">{{ translate('Closed milestone') }}: {{ m.title }}</div>
          {% endif %}
        {% endfor %}
      {% endif %}
      {% for t in item.TASKS %}
        <div class="text-sm text-gray-400">{{ t.TASK.identifier }} {{ t.TASK.title }}</div>
      {% endfor %}
    </div>
  </div>
</div>
