<div id="<%= dom_id element %>" class="mb-5">
  <%= turbo_frame_tag dom_id(element, :frame) do %>
    <div class="d-flex">
      <h2 class="h4">
          <i class="bi bi-boxes">
          </i>
        <%= element.page.position %>.<%= element.position %>
        <%= element.title %>
    </h2>
        <%= link_to [:edit, element], class: "btn btn-link text-secondary" do %>
        <i class="bi bi-pencil">
          </i>
        <% end %>
      </div>
    <% if element.description %>
      <div class="mb-3">
        <%= element.description %>
      </div>
    <% end %>

  <% end %>

  <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3">
    <% element.success_criteria.each do |sc| %>
      <%= render sc %>
    <% end %>
    <% if element.success_criteria.none? %>
      <p><i>Es sind (noch) keine Erfolgskriterien definiert.</i></p>
    <% end %>
  </div>

  <div>
    <%= turbo_frame_tag dom_id(element, "new_success_criterion_frame") do %>
      <%= render partial: "elements/new_success_criterion_button", locals: { element: element } %>
    <% end %>
  </div>
</div>
