<% title @episode.title %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/#{@podcast.slug}/#{@episode.slug}") %>" />
  <meta name="description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/#{@podcast.slug}/#{@episode.slug}") %>" />
  <meta property="og:title" content="<%= @episode.title %>" />
  <meta property="og:description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:creator" content="@software_daily">
  <meta name="twitter:title" content="<%= @episode.title %>">
  <meta name="twitter:description" content="<%= truncate(strip_tags(@episode.body), length: 140) %>" />

  <% if @episode.social_image.present? %>
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:image" content="<%= @episode.social_image_url %>">
    <meta name="twitter:image:src" content="<%= @episode.social_image_url %>">
  <% else %>
    <meta name="twitter:card" content="summary">
    <meta property="og:image" content="<%= @episode.image_url || @podcast.image_url %>">
    <meta name="twitter:image:src" content="<%= @episode.image_url || @podcast.image_url %>">
  <% end %>

<% end %>

<div class="podcast-episode-container" data-meta="<%= @episode.decorate.mobile_player_metadata.to_json %>">
  <div class="hero">
    <% 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="title" style="background:#<%= @podcast.main_color_hex %> url(<%= image_url %>)">
      <h2>
        <a href="/<%= @podcast.slug %>">
          <img alt="<%= @podcast.title %>" src="<%= cloudinary(@podcast.image_url, 60, 80) %>" /><%= @podcast.title %>
        </a>
        <button id="user-follow-butt" class="cta follow-action-button" data-info='{"id":<%= @podcast.id %>,"className":"<%= @podcast.class.name %>"}'>&nbsp;</button>
      </h2>
      <% if @episode.title.size > 60 %>
        <h1 class="smaller"><%= @episode.title %></h1>
      <% else %>
        <h1><%= @episode.title %></h1>
      <% end %>
      <% if @episode.published_at? %>
        <time class="published-at" datetime="<%= @episode.published_timestamp %>">
          <%= @episode.readable_publish_date %>
        </time>
      <% end %>
    </div>
    <div id="record-<%= @episode.slug %>" class="record-wrapper" data-podcast="<%= @podcast.slug %>" data-episode="<%= @episode.slug %>">
      <div class="record" id="record">
        <%= cl_image_tag(@podcast.image_url,
                         type: "fetch",
                         crop: "fill",
                         width: 420,
                         height: 420,
                         quality: "auto",
                         sign_url: true,
                         flags: "progressive",
                         fetch_format: "auto",
                         class: "main-image",
                         alt: @podcast.title) %>
        <img alt="Play Button" class="butt play-butt" src="<%= image_path("playbutt.png") %>" />
        <img alt="Pause Button" class="butt pause-butt" src="<%= image_path("pausebutt.png") %>" />
        <div class="status-message" id="status-message-<%= @episode.slug %>">
          play
        </div>
      </div>
    </div>
  </div>
  <%# checking both podcast_episode and podcast status for now  %>
  <% unless @episode.https? %>
    <center>
      <h1 style="color: #e05252;">
        <%= I18n.t "podcasts.statuses.unplayable" %>
      </h1>
      <p>
        <a href="<%= @episode.media_url %>">Click here to download/listen</a>
      </p>
    </center>
  <% end %>
  <div class="container">
    <div class="body">
      <% if @episode.podcast.feed_url.include?("soundcloud") %>
        <%= simple_format((@episode.processed_html || @episode.body), sanitize: true) %>
      <% else %>
        <%= sanitize (@episode.processed_html || ""),
                     tags: %w[strong br em a table tbody thead tfoot th tr td col colgroup del p h1 h2 h3 h4 h5 h6 blockquote time div span i em u b ul ol li dd dl dt q code pre img sup cite center small],
                     attributes: %w[href strong em class ref rel src title alt colspan height width size rowspan span value start data-conversation data-lang id] %>
      <% end %>
      <p style="font-size:16px;">
        <a href="<%= @episode.website_url %>">Episode source</a>
      </p>
    </div>
    <div class="comments-container-container">
      <div
        class="comments-container"
        id="comments-container"
        data-commentable-id="<%= @episode.id %>"
        data-commentable-type="PodcastEpisode">
        <%= render "/comments/form",
                   commentable: @episode,
                   commentable_type: "PodcastEpisode" %>
        <div class="comment-trees" id="comment-trees-container">
          <% Comment.tree_for(@episode, 12).each do |comment, sub_comments| %>
            <% cache ["comment_root_#{user_signed_in?}", comment] do %>
              <%= tree_for(comment, sub_comments, @episode) %>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<%= render "podcast_episodes/podcast_bar" %>
