<% if @show_blank_slate %>
  <div class="bg-light p-5 rounded-3 text-center m-0">
    <% if Flipper::UI.configuration.fun %>
      <h4>But I've got a blank space baby...</h4>
      <p>And I'll flip your features.</p>
      <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
        <p>
          <a class="btn btn-primary" href="<%= script_name %>/features/new">Add Feature</a>
        </p>
      <%- end -%>
    <% else %>
      <h4>Getting Started</h4>
      <p class="mb-1">You have not added any features to configure yet.</p>
      <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
        <p class="mt-2">
          <a class="btn btn-primary btn-lg" href="<%= script_name %>/features/new">Add Feature</a>
        </p>
      <% else %>
        <p>
          Check the <a href="https://github.com/flippercloud/flipper#examples">examples</a> to
          learn how to add one.
        </p>
      <%- end -%>
    <% end %>
  </div>
<% else %>
  <div class="list-group">
    <div class="list-group-item bg-light">
      <div class="row align-items-center">
        <h4 class="col m-0">Features</h4>
        <%- if write_allowed? && Flipper::UI.configuration.feature_creation_enabled -%>
          <div class="col-auto">
            <a class="btn btn-primary btn-sm" href="<%= script_name %>/features/new">Add Feature</a>
          </div>
        <%- end -%>
      </div>
    </div>
    <% @features.each do |feature| %>
      <a href="<%= "#{script_name}/features/#{Flipper::UI::Util.escape(feature.key)}" %>" class="list-group-item list-group-item-action">
        <div class="row align-items-center">
          <div class="col-1 text-center">
            <span class="status <%= feature.color_class %>" data-bs-toggle="tooltip" title=<%= feature.state.to_s.capitalize %>></span>
          </div>
          <div class="col-11">
            <div class="text-truncate" style="font-weight: 500"><%= feature.key %></div>
            <% if Flipper::UI.configuration.show_feature_description_in_list? && Flipper::UI::Util.present?(feature.description) %>
              <div class="text-muted fw-light" style="line-height: 1.4; white-space: initial; padding: 8px 0">
                <%== Sanitize.fragment(feature.description, Flipper::UI::SANITIZE_LIST) %>
              </div>
            <% end %>
            <div class="text-muted text-truncate">
              <%== feature.gates_in_words %>
            </div>
          </div>
        </div>
      </a>
    <% end %>
  </div>
<% end %>
