<% image_url = cl_image_path(podcast.pattern_image_url || "https://i.imgur.com/fKYKgo4.png",
                             type: "fetch", quality: "auto", sign_url: true,
                             flags: "progressive", fetch_format: "jpg") %>

<div class="podcastliquidtag" style="background: #<%= podcast.main_color_hex %> url(<%= image_url %>)" data-meta="<%= episode.decorate.mobile_player_metadata.to_json %>">
  <div class="podcastliquidtag__info">
    <a href="/<%= podcast.slug %>/<%= episode.slug %>">
      <h1 class="podcastliquidtag__info__episodetitle"><%= episode.title %></h1>
    </a>
    <a href="/<%= podcast.slug %>">
      <h2 class="podcastliquidtag__info__podcasttitle">
        <%= podcast.title %> <button class="cta follow-action-button" data-info='{"id":<%= podcast.id %>,"className":"<%= podcast.class.name %>"}'>&nbsp;</button>

      </h2>
    </a>
  </div>
  <div id="record-<%= episode.slug %>" data-podcast="<%= podcast.slug %>" data-episode="<%= episode.slug %>" class="podcastliquidtag__record">
    <img class="button play-butt" id="play-butt-<%= episode.slug %>" src="/assets/playbutt.png" alt="play">
    <img class="button pause-butt" id="pause-butt-<%= episode.slug %>" src="/assets/pausebutt.png" alt="pause">
    <%= cl_image_tag(podcast.image_url,
                     type: "fetch",
                     crop: "fill",
                     quality: "auto",
                     sign_url: true,
                     flags: "progressive",
                     fetch_format: "auto",
                     class: "podcastliquidtag__podcastimage",
                     id: "podcastimage-#{episode.slug}",
                     alt: podcast.title) %>
  </div>
  <div class="hidden-audio" id="hidden-audio-<%= episode.slug %>" style="display:none" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
    <audio id="audio" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
      <source src="<%= episode.media_url %>" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <div id="progressBar" class="audio-player-display">
      <a href="/<%= podcast.slug + "/" + episode.slug %>">
        <%= cl_image_tag(episode.image_url || podcast.image_url,
                         type: "fetch",
                         crop: "fill",
                         width: 420,
                         height: 420,
                         quality: "auto",
                         sign_url: true,
                         flags: "progressive",
                         fetch_format: "auto",
                         id: "episode-profile-image",
                         alt: episode.title) %>
        <img id="animated-bars" src="/assets/animated-bars.gif" alt="animated volume bars">
      </a>
      <span id="barPlayPause">
        <img class="butt play-butt" src="/assets/playbutt.png" alt="play">
        <img class="butt pause-butt" src="/assets/pausebutt.png" alt="pause">
      </span>
      <span id="volume">
        <span id="volumeindicator" class="volume-icon-wrapper showing">
          <span id="volbutt">
            <%= image_tag("/assets/volume.png", alt: "volume", class: "icon-img", height: 16, width: 16) %>
          </span>
          <span class="range-wrapper">
            <input type="range" name="points" id="volumeslider" value="50" min="0" max="100" data-show-value="true">
          </span>
        </span>
        <span id="mutebutt" class="volume-icon-wrapper hidden">
          <%= image_tag("/assets/volume-mute.png", alt: "mute", class: "icon-img", height: 16, width: 16) %>
        </span>
        <span class="speed" id="speed" data-speed=1>1x</span>
      </span>
      <span class="buffer-wrapper" id="bufferwrapper">
        <span id="buffer"></span>
        <span id="progress"></span>
        <span id="time">initializing...</span>
        <span id="closebutt">×</span>
      </span>
    </div>
  </div>
</div>
