<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark {{ extra_classes }}">
  <div class="flex text-lg 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="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
        </ul>
        {% for check_name, check in scene_data.Checks.items %}
          {% if not check %}
            <ul class="min-w-max bg-bluelight-translucent rounded-xl 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="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
        </ul>
        {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
          {% if entrance_destination == "" %}
            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
              ❌ {{ entrance_origin }}
            </ul>
          {% else %}
            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
              ❌ {{ entrance_origin }}
            </ul>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
    <div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
      <ul class="bg-bluelight rounded-xl px-1 text-sm hidden">
      </ul>
      {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
        {% if entrance_destination %}
          <ul class="bg-bluelight rounded-xl px-1 text-sm">
            ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
          </ul>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="pt-4">{% include "tracker/codes/index.html" %}</div>
</div>
