<turbo-stream action="update" target="modal_container"><template>
  <div id="imageModal"
       class="image-modal active"
       data-controller="modal"
       data-modal-target="modal">
    <div class="modal-backdrop"
         data-action="click->modal#closeOnBackdrop"></div>
    <div class="modal-content">
      <button class="modal-close"
              data-action="click->modal#close">&times;</button>

      <div class="modal-main-image">
        <button class="modal-arrow modal-arrow-left"
                data-action="click->modal#previousImage">
          <img class="arrow-icon" src="/assets/double-right-chevron-1e7ef50f36e4e662b94ffa7ddf275004c505b0974ecbd7673e2214f092503a8a.svg" />
        </button>

        <div class="main-image-container">
          <div class="loading-placeholder"
               data-modal-target="placeholder">Click a thumbnail below to view image</div>
          <img id="modalMainImage"
               src=""
               alt=""
               style="display: none;"
               data-modal-target="mainImage">
        </div>

        <button class="modal-arrow modal-arrow-right"
                data-action="click->modal#nextImage">
          <img class="arrow-icon" src="/assets/double-right-chevron-1e7ef50f36e4e662b94ffa7ddf275004c505b0974ecbd7673e2214f092503a8a.svg" />
        </button>
      </div>

      <div class="modal-carousel">
        <div class="carousel-thumbnails">
            <div class="carousel-thumb "
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1759072700/xhquvkwtfodguew5vamu.png"
                 data-thumbnail-title-value="Survival of the Fittest"
                 data-thumbnail-description-value="Frôsted and Sassqt peer into the fiery depths at what could come without taking necessary precautions.">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/xhquvkwtfodguew5vamu?_a=BACAGSGT" alt="Survival of the Fittest">
            </div>
            <div class="carousel-thumb "
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1758966244/idq3gzhcyjrnuanxoagm.png"
                 data-thumbnail-title-value="Frosted, our Glorious GM"
                 data-thumbnail-description-value="He has never looked so mighty as when the tree topper topped him">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/idq3gzhcyjrnuanxoagm?_a=BACAGSGT" alt="Frosted, our Glorious GM">
            </div>
            <div class="carousel-thumb "
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1758966124/gj9r1qxf2m28sjq4gihg.jpg"
                 data-thumbnail-title-value="A Valiant Hunter"
                 data-thumbnail-description-value="Aiming his bow, ready to strike down any foe that comes in range.">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/gj9r1qxf2m28sjq4gihg?_a=BACAGSGT" alt="A Valiant Hunter">
            </div>
            <div class="carousel-thumb "
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1758966050/gisyrrsvn4js240qpeed.png"
                 data-thumbnail-title-value="Provo Tree?"
                 data-thumbnail-description-value="Who knows? ">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/gisyrrsvn4js240qpeed?_a=BACAGSGT" alt="Provo Tree?">
            </div>
            <div class="carousel-thumb active"
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1758966012/ui56pjikhvsrs4c5m9nv.jpg"
                 data-thumbnail-title-value="Killidan"
                 data-thumbnail-description-value="He wasn&#39;t prepared or something. ">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/ui56pjikhvsrs4c5m9nv?_a=BACAGSGT" alt="Killidan">
            </div>
            <div class="carousel-thumb "
                 data-action="click->modal#selectThumbnail"
                 data-thumbnail-full-url-value="https://res.cloudinary.com/dsdjnovkb/image/upload/v1758965873/m2nze9p24c7kiq4tfvqa.png"
                 data-thumbnail-title-value="Algalon the Observer"
                 data-thumbnail-description-value="Just chilling in the shiny room">
              <img src="https://res.cloudinary.com/dsdjnovkb/image/upload/c_fill,g_center,h_80,w_80/m2nze9p24c7kiq4tfvqa?_a=BACAGSGT" alt="Algalon the Observer">
            </div>
        </div>
      </div>

      <div class="modal-info">
        <h3 id="modalTitle"
            data-modal-target="title">Killidan</h3>
        <p id="modalDescription"
           data-modal-target="description">He wasn&#39;t prepared or something. </p>
      </div>
    </div>
  </div>
</template></turbo-stream>
