<div class="flex flex-col space-y-2 max-w-full {{ extra_classes }}"
     id="{{ scene }}-breakdown">
  <div class="px-2">
    <div class="flex text-xl breakdown-block-title">{{ scene_title }}</div>
    <div class="flex flex-col md:flex-row justify-center md:space-x-4">
      <div class="flex flex-col basis-1/2 overflow-hidden">
        <div class="my-2 flex flex-col space-y-2">
          <div class="text-md breakdown-block-checks-title">
            Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
          </div>
          <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
        </div>
        <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
          <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
          </ul>
          {% for check_name, check in scene_data.Checks.items %}
            {% if not check %}
              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
                ❌ {{ check_name }}
              </ul>
            {% endif %}
          {% endfor %}
        </div>
      </div>
      <div class="flex flex-col basis-1/2 overflow-hidden">
        <div class="my-2 flex flex-col space-y-2">
          <div class="text-md breakdown-block-entrances-title">
            Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
          </div>
          <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
        </div>
        <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
          <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
          </ul>
          {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
            {% if entrance_destination.Door == "" %}
              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
                ❌ {{ entrance_origin }}
              </ul>
            {% else %}
              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
                ❌ {{ entrance_origin }}
              </ul>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-trans-pride-cyan-translucent scrollbar-track-bluelight-translucent">
      <div class="p-1 flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
        <button type="button"
                class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm hidden"
                onclick="open_breakdown(this)"></button>
        {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
          {% if entrance_destination %}
            <button type="button"
                    class="py-0.5 text-start bg-gradient-to-br from-bluelight-translucent-dark to-trans-pride-cyan-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
                    id="{{ entrance_origin }}-mapped"
                    onclick="open_breakdown(this)"
                    data-scene="{{ entrance_destination.Scene }}">
              ✔️ {{ entrance_origin }} -> {{ entrance_destination.Door }}
            </button>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
  <hr class="px-2 border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
