<root data-test="player--xl" style="max-width:950px;min-width:260px;">
  <div
    class="tablet:px-6 tablet:pt-6 mobile:px-4 mobile:pt-4 flex flex-col"
  >
    <div class="mobile:flex mb-4 tablet:hidden flex-col items-center">
      <poster
        class="w-48 rounded-sm shadow overflow-hidden mb-4"
      ></poster>
      <show-title class="text-base"></show-title>
      <episode-title class="text-xl desktop:text-2xl"></episode-title>
      <episode-subtitle
        class="leading-tight text-center"
      ></episode-subtitle>
    </div>

    <div class="hidden tablet:flex flex-grow mb-4">
      <poster
        class="w-40 mr-6 rounded-sm shadow overflow-hidden"
      ></poster>
      <div class="w-full">
        <show-title class="text-base"></show-title>
        <episode-title class="text-xl desktop:text-2xl"></episode-title>
        <episode-subtitle class="leading-tight"></episode-subtitle>
      </div>
    </div>

    <div class="w-full mb-6">
      <div class="flex items-center justify-between">
        <div class="block">
          <play-state on="active">
            <speed-control class="block"></speed-control>
          </play-state>
        </div>

        <div class="flex">
          <play-state on="active">
            <chapter-previous class="mx-2 block"></chapter-previous>
          </play-state>
          <play-state on="active">
            <step-backward class="mx-2 block"></step-backward>
          </play-state>

          <play-button class="mx-2 block"></play-button>

          <play-state on="active">
            <step-forward class="mx-2 block"></step-forward>
          </play-state>
          <play-state on="active">
            <chapter-next class="mx-2 block"></chapter-next>
          </play-state>
        </div>

        <div class="block">
          <play-state on="active">
            <volume-control class="flex items-center"></volume-control>
          </play-state>
        </div>
      </div>

      <play-state on="active">
        <div class="w-full">
          <div class="flex w-full">
            <progress-bar></progress-bar>
          </div>

          <div class="flex w-full -mt-2">
            <div class="w-3/12 text-left">
              <timer-current class="text-sm"></timer-current>
            </div>
            <div class="w-6/12 text-center truncate">
              <current-chapter class="text-sm"></current-chapter>
            </div>
            <div class="w-3/12 text-right">
              <timer-duration class="text-sm"></timer-duration>
            </div>
          </div>
        </div>
      </play-state>
    </div>
    <divider class="w-full mb-3"></divider>
    <div class="flex justify-between">
      <div
        class="flex mobile:w-full tablet:w-6/12 desktop:w-3/12 justify-between"
      >
        <tab-trigger tab="shownotes">
          <icon type="info"></icon>
        </tab-trigger>
        <tab-trigger tab="chapters">
          <icon type="chapter"></icon>
        </tab-trigger>
        <tab-trigger tab="transcripts">
          <icon type="transcripts"></icon>
        </tab-trigger>
        <tab-trigger tab="files">
          <icon type="download"></icon>
        </tab-trigger>
        <tab-trigger tab="playlist">
          <icon type="playlist"></icon>
        </tab-trigger>
        <tab-trigger tab="share">
          <icon type="share"></icon>
        </tab-trigger>
      </div>
      <subscribe-button
        class="mt-1 mobile:hidden tablet:flex"
      ></subscribe-button>
    </div>
  </div>
  <div class="w-full relative overflow-hidden">
    <tab name="shownotes">
      <tab-shownotes></tab-shownotes>
    </tab>

    <tab name="chapters">
      <tab-chapters></tab-chapters>
    </tab>

    <tab name="transcripts">
      <tab-transcripts></tab-transcripts>
    </tab>
    <tab name="files">
      <tab-files></tab-files>
    </tab>
    <tab name="playlist">
      <tab-playlist></tab-playlist>
    </tab>
    <tab name="share">
      <tab-share></tab-share>
    </tab>
    <tab-overflow></tab-overflow>
  </div>
  <error></error>
</root>
