dashboard-ui/item/item.html

<div
  is="emby-scroller"
  data-horizontal="false"
  data-focusscroll="true"
  data-navcommands="card"
  data-forcescrollbar="true"
  class="itemView darkContentContainer-item view flex flex-direction-column scrollFrameY flex-grow"
  data-bindheader="true"
  data-enablescrollingstatus="true"
>
  <div class="scrollSlider flex-grow padded-top-page itemMainScrollSlider">
    <div class="topDetailsContainer flex flex-direction-row">
      <div
        class="item-fixed-side padded-left padded-left-page hide flex flex-direction-column flex-shrink-zero"
      >
        <div
          is="emby-itemscontainer"
          class="detailImageContainer detailImageContainer-side justify-content-center"
        ></div>
      </div>

      <div class="flex-grow topDetailsMain flex flex-direction-column">
        <div class="itemBackdropContainer">
          <div class="itemBackdrop" loading="lazy" decoding="async"></div>
        </div>

        <div
          class="padded-left padded-left-page padded-right detailMainContainerParent"
        >
          <div
            class="verticalSection detailMainContainer flex flex-direction-row align-items-flex-start"
          >
            <div
              is="emby-itemscontainer"
              class="detailImageContainer detailImageContainer-main flex flex-direction-column justify-content-center"
            ></div>

            <div class="flex-grow detailTextContainer">
              <div
                class="flex align-items-center flex-direction-row detailTextContainerInner"
              >
                <div class="flex flex-direction-column" style="min-width: 60%">
                  <div class="nameContainer focuscontainer-x"></div>
                  <div
                    class="mediaInfo mediaInfoPrimary detail-mediaInfoPrimary flex align-items-center flex-wrap-wrap reduce-font-size-tv mediaInfoItems readOnlyContent hide"
                  ></div>
                </div>
              </div>

              <div
                class="mediaInfo mediaInfoSecondary flex align-items-center flex-wrap-wrap reduce-font-size-tv mediaInfoItems hide"
                style="margin: 0.6em 0"
              ></div>

              <form
                class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x reduce-font-size-tv"
                style="padding: 0; max-width: initial"
              >
                <div
                  class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero"
                >
                  <select
                    hidden="emby-select"
                    class="selectSource detailTrackSelect emby-select-inline"
                    label="${}"
                  ></select>
                </div>
                <div
                  class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero"
                >
                  <select
                    hidden="emby-select"
                    class="selectVideo detailTrackSelect emby-select-inline"
                    label="${}"
                  ></select>
                </div>
                <div
                  class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero"
                >
                  <select
                    hidden="emby-select"
                    class="selectAudio detailTrackSelect emby-select-inline"
                    label="${}"
                    data-menu="custom"
                  ></select>
                </div>
                <div
                  class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer"
                >
                  <select
                    is="emby-select"
                    class="selectSubtitles detailTrackSelect emby-select-inline"
                    label="${LabelSubtitles}"
                    data-menu="custom"
                  ></select>
                </div>
              </form>

              <div
                class="detailButtons mainDetailButtons flex align-items-flex-start flex-wrap-wrap focuscontainer-x"
              >
                <button
                  is="emby-button"
                  type="button"
                  class="btnResume raised detailButton hide"
                  data-mode="resume"
                  title="${Resume}"
                >
                  <i class="md-icon button-icon button-icon-left autortl"
                    >&#xE037;</i
                  >
                  <span class="resumeButtonText detailButton-lowres"
                    >${Resume}</span
                  >
                  <span class="resumeButtonText detailButton-highres"
                    >${Resume}</span
                  >
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnPlay btnMainPlay hide raised detailButton"
                  data-mode="play"
                  title="${Play}"
                >
                  <i class="md-icon button-icon button-icon-left autortl"
                    >&#xE037;</i
                  >
                  <span class="playButtonText">${Play}</span>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnPlayTrailer btnPlayTrailer-main hide raised detailButton"
                  title="${Trailer}"
                  aria-label="${Trailer}"
                >
                  <i class="md-icon button-icon button-icon-left">&#xE8DA;</i>
                  <span>${Trailer}</span>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnShuffle hide raised detailButton"
                  title="${Shuffle}"
                >
                  <i class="md-icon button-icon button-icon-left">&#xE043;</i>
                  <span>${Shuffle}</span>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnCancelSeriesTimer hide raised detailButton"
                  title="${HeaderCancelSeries}"
                >
                  <i
                    class="md-icon button-icon button-icon-left recordingIcon-active"
                    >&#xE047;</i
                  >
                  <span>${HeaderCancelSeries}</span>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnCancelTimer hide raised detailButton"
                  title="${HeaderStopRecording}"
                >
                  <i
                    class="md-icon button-icon button-icon-left recordingIcon-active"
                    >&#xE047;</i
                  >
                  <span>${HeaderStopRecording}</span>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnManualRecording hide raised detailButton"
                  title="${HeaderCreateRecording}"
                >
                  <i class="md-icon button-icon button-icon-left">&#xe061;</i>
                  <span>${HeaderCreateRecording}</span>
                </button>

                <button
                  is="emby-playstatebutton"
                  type="button"
                  class="btnPlaystate hide raised detailButton detailButton-highres2"
                >
                  <i class="md-icon button-icon button-icon-left">&#xe86c;</i>
                  <span class="button-text"></span>
                </button>

                <button
                  is="emby-downloadbutton"
                  type="button"
                  class="btnSyncDownload hide fab detailButton detailButton-autotext"
                  title="${Download}"
                >
                  <i class="md-icon detailButton-autotext-icon">&#xf090;</i>
                  <div
                    class="detailButton-autotext-text secondaryText button-text"
                  >
                    ${Download}
                  </div>
                </button>

                <button
                  is="emby-playstatebutton"
                  type="button"
                  class="btnPlaystate hide fab detailButton detailButton-lowres2 detailButton-autotext"
                >
                  <i class="md-icon detailButtonIcon detailButton-autotext-icon"
                    >&#xE5CA;</i
                  >
                  <div
                    class="detailButton-autotext-text secondaryText button-text"
                  ></div>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnSortItems hide fab detailButton detailButton-autotext"
                  title="${HeaderSortBy}"
                  aria-label="${HeaderSortBy}"
                >
                  <i class="md-icon detailButton-autotext-icon">&#xE164;</i>
                  <div
                    class="detailButton-autotext-text secondaryText btnSortText"
                  >
                    ${HeaderSortBy}
                  </div>
                </button>

                <button
                  is="emby-ratingbutton"
                  type="button"
                  class="btnUserRating hide fab detailButton detailButton-autotext"
                >
                  <i class="md-icon detailButton-autotext-icon">&#xE87D;</i>
                  <div
                    class="detailButton-autotext-text secondaryText button-text"
                  ></div>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnDeleteItem hide fab detailButton detailButton-autotext"
                  title="${Delete}"
                  aria-label="${Delete}"
                >
                  <i class="md-icon detailButton-autotext-icon">&#xE872;</i>
                  <div class="detailButton-autotext-text secondaryText">
                    ${Delete}
                  </div>
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="btnMoreCommands hide fab detailButton detailButton-autotext"
                  title="${More}"
                  aria-label="${More}"
                >
                  <i class="md-icon detailButton-autotext-icon">&#xE5D3;</i>
                  <div class="detailButton-autotext-text secondaryText">
                    ${More}
                  </div>
                </button>

                <div
                  class="detailResumeInfo flex flex-wrap-wrap flex-direction-column hide"
                >
                  <div class="resumeInfoDetail">
                    <div class="resumeName hide"></div>
                    <div
                      class="resumeProgress hide flex align-items-center"
                    ></div>
                  </div>
                </div>

                <div
                  class="detailRecordSeriesContainer recordSeriesContainer recordingFields-buttons flex align-items-flex-start flex-wrap-wrap hide"
                >
                  <button
                    is="emby-button"
                    type="button"
                    class="seriesRecordingButton detailButton raised"
                    title="${HeaderRecordSeries}"
                  >
                    <i
                      class="md-icon button-icon button-icon-left recordingIcon"
                      >&#xE062;</i
                    >
                    <span class="button-text seriesRecordingButtonText"
                      >${HeaderRecordSeries}</span
                    >
                  </button>

                  <button
                    is="emby-button"
                    type="button"
                    class="manageRecordingButton btnManageSeriesRecording hide detailButton raised"
                    title="${SeriesSettings}"
                  >
                    <i
                      class="md-icon button-icon button-icon-left recordingIcon"
                      >&#xE8B8;</i
                    >
                    <span class="button-text seriesRecordingButtonText"
                      >${SeriesSettings}</span
                    >
                  </button>
                </div>

                <button
                  is="emby-button"
                  type="button"
                  class="singleRecordingButton detailButton hide raised"
                  title="${Record}"
                >
                  <i class="md-icon button-icon button-icon-left recordingIcon"
                    >&#xE061;</i
                  >
                  <span class="button-text singleRecordingButtonText"
                    >${Record}</span
                  >
                </button>

                <button
                  is="emby-button"
                  type="button"
                  class="manageRecordingButton btnManageRecording hide detailButton raised"
                  title="${Settings}"
                >
                  <i class="md-icon button-icon button-icon-left recordingIcon"
                    >&#xE8B8;</i
                  >
                  <span class="button-text seriesRecordingButtonText"
                    >${Settings}</span
                  >
                </button>
              </div>

              <h3
                class="tagline hide readOnlyContent"
                style="max-width: 75.5ch"
              ></h3>
              <p class="birthDate hide"></p>
              <p class="deathDate hide"></p>

              <div
                class="overview-container hide flex flex-direction-row align-items-flex-end focuscontainer-x"
              >
                <button
                  disabled
                  type="button"
                  is="emby-button"
                  class="button-link button-link-color-inherit btnOverviewText text-align-start"
                  style="opacity: initial"
                >
                  <div class="overview-text readOnlyContent"></div>
                </button>
                <a
                  href="#"
                  is="emby-linkbutton"
                  class="button-link btnReadMore hide flex-shrink-zero secondaryText"
                  >{HeaderReadMore}</a
                >
              </div>

              <p
                class="directors hide focuscontainer-x readOnlyContent reduce-font-size-tv secondaryText"
              ></p>

              <div class="recordingEditor hide" style="margin-top: 2em"></div>
            </div>
          </div>

          <div
            class="trackList vertical-list padded-bottom hide focuscontainer-x"
            is="emby-itemscontainer"
            style="margin-bottom: 1.5em"
          ></div>
        </div>
      </div>
    </div>

      <div
        class="verticalSection verticalSection-cards linksSection hide verticalSection-extrabottompadding focuscontainer-x"
      >
        <h2
          class="sectionTitle padded-left padded-left-page padded-right"
          style="margin-bottom: 0.4em"
        >
          ${Links}
        </h2>
        <div
          class="itemLinks padded-left padded-left-page padded-right focusable"
        ></div>
      </div>

    <div class="details-additionalContent padded-bottom-page">
      <div
        class="programGuideSection hide padded-left padded-left-page padded-right"
      >
        <div
          is="emby-itemscontainer"
          class="itemsContainer programGuideItemsContainer vertical-list focuscontainer-x padded-bottom-page"
          data-virtualscrolllayout="vertical-grid"
        ></div>
      </div>

      <div
        class="verticalSection verticalSection-cards additionalPartsSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderAdditionalParts}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer additionalPartsItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards verticalSection-extrabottompadding artistSongsSection hide"
      >
        <div
          class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-left-page padded-right artistSongsItemsHeader"
        ></div>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer focusable artistSongsItemsContainer itemsContainer-sideFooters"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div
        class="verticalSection verticalSection-cards seriesItemsSection hide"
      >
        <div
          class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-left-page padded-right"
        >
          <h2 class="sectionTitle sectionTitle-cards"></h2>
          <div
            class="selectContainer selectContainer-inline sectionTitle-cards detailSelectSeasonContainer hide"
            style="margin-top: 0 !important; margin-bottom: 0.4em !important"
          >
            <select
              is="emby-select"
              style="width: 24ch"
              class="detailSelectSeason emby-select-inline"
              label="${Season}"
              data-dialogclass="detailSeasonSelect-actionsheet"
              data-hasitemimage="true"
              data-overview="true"
              data-virtualscroll="false"
            ></select>
          </div>
        </div>
        <div class="seasonTabs hide focuscontainer-x"></div>
        <div
          is="emby-scroller"
          class="emby-scroller childrenItemsScroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x childrenItemsContainer generalItemsContainer itemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div
        class="verticalSection verticalSection-cards artistAlbumsSection hide"
      >
        <div
          class="sectionTitleContainer sectionTitleContainer-cards padded-left padded-left-page padded-right"
        >
          <a
            is="emby-sectiontitle"
            href="#"
            class="button-link button-link-color-inherit sectionTitleTextButton"
          >
            <h2 class="sectionTitle sectionTitle-cards">${Albums}</h2>
          </a>
        </div>
        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x generalItemsContainer itemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards collectionItemsSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${Items}
        </h2>
        <div
          is="emby-itemscontainer"
          class="itemsContainer vertical-wrap collectionItemsContainer generalItemsContainer focuscontainer-x padded-left padded-left-page padded-right"
        ></div>
      </div>

      <div
        class="verticalSection verticalSection-cards moreFromSeasonSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        ></h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer moreFromSeasonItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div class="verticalSection verticalSection-cards peopleSection hide">
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderCastCrew}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer focusable peopleItemsContainer"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div class="verticalSection verticalSection-cards extrasSection hide">
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${Extras}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer extrasItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div class="verticalSection verticalSection-cards scenesSection hide">
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${Chapters}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer chaptersItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards verticalSection-extrabottompadding tagsSection hide focuscontainer-x"
      >
        <h2
          class="sectionTitle padded-left padded-left-page padded-right"
          style="margin-bottom: 0.4em"
        >
          ${Tags}
        </h2>
        <div
          class="itemTags padded-left padded-left-page padded-right focusable"
        ></div>
      </div>

      <div
        class="verticalSection verticalSection-cards moreFromArtistSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        ></h2>
        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer moreFromArtistItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>
      <div
        class="verticalSection verticalSection-cards seriesScheduleSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderUpcomingOnTV}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer focusable seriesScheduleItemsContainer"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards appearsOnListsSection hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderIncludedIn}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer appearsOnListsItemsContainer focusable"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div class="peopleItems"></div>

      <div class="verticalSection verticalSection-cards similarSection hide">
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderMoreLikeThis}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer focusable similarItemsContainer"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards similarOnLiveTVCollapsible hide"
      >
        <h2
          class="sectionTitle sectionTitle-cards padded-left padded-left-page padded-right"
        >
          ${HeaderMoreLikeThisOnLiveTV}
        </h2>

        <div
          is="emby-scroller"
          class="emby-scroller padded-top-focusscale padded-bottom-focusscale padded-left padded-left-page padded-right"
          data-mousewheel="false"
          data-focusscroll="true"
          data-horizontal="true"
        >
          <div
            is="emby-itemscontainer"
            class="scrollSlider focuscontainer-x itemsContainer focusable similarOnLiveTVItemsContainer"
            data-virtualscrolllayout="horizontal-grid"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards seriesTimerScheduleSection padded-left padded-left-page padded-right hide"
      >
        <h2 class="sectionTitle" style="margin-bottom: 0">${Schedule}</h2>
        <div class="seriesTimerSchedule">
          <div
            is="emby-itemscontainer"
            class="itemsContainer seriesTimerScheduleItemsContainer vertical-list focuscontainer-x"
            data-monitor="Timers"
          ></div>
        </div>
      </div>

      <div
        class="verticalSection verticalSection-cards audioVideoMediaInfo hide mediainfo-forcehide"
      >
        <h2
          class="padded-left padded-left-page padded-right sectionTitle sectionTitle-cards mediaInfoHeader"
          style="margin-bottom: 0"
        >
          ${HeaderMediaInfo}
        </h2>
        <div
          class="splitVersionContainer padded-top padded-bottom padded-left padded-left-page padded-right"
        >
          <button
            is="emby-button"
            type="button"
            class="raised btnSplitVersions subdued"
          >
            ${HeaderSplitVersionsApart}
          </button>
        </div>

        <div class="mediaSources"></div>
      </div>
    </div>
  </div>
</div>