<li>
  <div class="milestone-content">

    <% if milestone.publication_date.present? %>
      <span class="milestone-date">
        <strong>
          <%= t("milestones.show.publication_date",
                publication_date: l(milestone.publication_date.to_date)) %>
        </strong>
      </span>
    <% end %>

    <% if milestone.status.present? %>
      <p>
        <strong>
          <%= t("milestones.show.status_changed") %>
        </strong>
        <br>
        <span class="milestone-status">
          <%= milestone.status.name %>
        </span>
      </p>
    <% end %>

    <%= image_tag(milestone.image.variant(:large), { id: "image_#{milestone.id}", alt: milestone.image.title, class: "margin" }) if milestone.image.present? %>

    <p>
      <%= sanitize_and_auto_link milestone.description %>
    </p>

    <% if milestone.documents.present? %>
      <div class="documents">
        <div class="document-link text-left small">
          <p>
            <strong><%= t("shared.documentation") %></strong>
          </p>

          <% milestone.documents.each do |document| %>
            <%= render Documents::DocumentComponent.new(document) %>
          <% end %>
        </div>
      </div>
    <% end %>

  </div>
</li>
