<div class="breakdown flex flex-col space-y-2 max-w-full {{ extra_classes }}"
     data-current="{{ is_current_scene }}"
     data-scene="{{ scene_title }}">
  <div class="p-2 px-2 space-y-2 bg-gradient-to-br from-[#8080FF40] to-[#8080FF20]">
    <div class="flex flex-col w-full min-w-full">
      <div class="text-xl breakdown-block-title">{{ scene_title }}</div>
      <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
    </div>
    <div class="flex flex-col justify-center md:flex-row">
      <div class="mt-1 mr-0 md:mr-1 md:mt-0 p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10] basis-1/2 md:max-w-[50%]">
        <div class="flex flex-col flex-shrink-0 breakdown-checks">
          <div class="flex flex-col my-0 space-y-2">
            <div class="text-md breakdown-block-checks-title"
                 data-checks="{{ scene_data.checks.collected }}">
              Checks: {{ scene_data.checks.collected }}/{{ scene_data.checks.total }} ({{ scene_data.checks.remaining }} left)
            </div>
            <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
          </div>
          <div class="grid grid-flow-row space-y-2 overflow-auto max-h-64 breakdown-block-checks-list scrollbar-none">
            <ul class="py-0.5 min-w-max bg-bluelight-translucent-dark rounded-md px-1 text-sm hidden">
            </ul>
            {% for check_name, check in scene_data.checks.checks.items %}
              {% if not check.name %}
                <ul class="py-0.5 min-w-max bg-bluelight-translucent-dark rounded-md px-1 text-sm">
                  ❌ {{ check_name }}
                </ul>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="mt-1 ml-0 md:ml-1 md:mt-0 p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10] basis-1/2 md:max-w-[50%]">
        <div class="flex flex-col flex-shrink-0 overflow-hidden breakdown-entrances">
          <div class="grid grid-flow-row space-y-2">
            <div class="text-md breakdown-block-entrances-title"
                 data-entrances="{{ scene_data.entrances.found }}">
              Entrances: {{ scene_data.entrances.found }}/{{ scene_data.entrances.total }} ({{ scene_data.entrances.remaining }} left)
            </div>
            <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
          </div>
          <div class="grid grid-flow-row space-y-2 overflow-auto max-h-64 breakdown-block-entrances-list scrollbar-none">
            <ul class="py-0.5 min-w-max bg-bluelight-translucent-dark rounded-md px-1 text-sm hidden">
            </ul>
            {% for entrance_origin, entrance_destination in scene_data.entrances.doors.items %}
              {% if entrance_destination.door == "" %}
                <ul class="py-0.5 min-w-max bg-bluelight-translucent-dark rounded-md px-1 text-sm">
                  ❌ {{ entrance_origin }}
                </ul>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    <div class="p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10]">
      <div class="overflow-auto scrollbar-none max-h-64">
        <div class="flex flex-col mx-auto min-w-max breakdown-block-mapped-list">
          <button type="button"
                  class="hidden m-1 text-start bg-gradient-to-br from-bluelight-translucent-dark to-bluelight-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
                  onclick="open_breakdown(this)"
                  data-scene=""></button>
          {% for entrance_origin, entrance_destination in scene_data.entrances.doors.items %}
            {% if entrance_destination.door %}
              <button type="button"
                      class="m-1 text-start bg-gradient-to-br from-bluelight-translucent-dark to-bluelight-translucent rounded-md px-1 text-sm shadow-sm shadow-[#242424]"
                      onclick="open_breakdown(this)"
                      data-scene="{{ entrance_destination.scene }}">
                ✔️ {{ entrance_origin }} -> {{ entrance_destination.door }}
              </button>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <hr class="px-2 border-2 border-bluelight-translucent-dark rounded-xl" />
</div>
