<%= content_for :page_meta do %>
  <% title "Videos" %>

  <link rel="canonical" href="https://dev.to<%= request.path %>" />
  <meta name="description" content="Where programmers share ideas and help each other grow.">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://dev.to<%= request.path %>" />
  <meta property="og:title" content="<% title "Videos" %>" />
  <meta property="og:image" content="<%= ApplicationConfig["MAIN_SOCIAL_IMAGE"] %>">
  <meta property="og:description" content="All videos on DEV" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:site" content="@ThePracticalDev">
  <meta name="twitter:title" content="<% title "Videos" %>">
  <meta name="twitter:description" content="All videos on DEV">
  <meta name="twitter:image:src" content="<%= ApplicationConfig["MAIN_SOCIAL_IMAGE"] %>">
  <meta name="twitter:card" content="summary_large_image">
<% end %>

<div class="home video-page-title" id="index-container" data-which="videos" data-params="<%= params.to_json(only: %i[tag username q]) %>">
  <header>
    <h1>DEV on Video</h1>
  </header>
  <div class="video-collection" id="video-collection">
    <% @video_articles.each do |video_article| %>
      <a class="single-video-article single-article" href="<%= video_article.path %>" id="video-article-<%= video_article.id %>">
          <div class="video-image" style="background-image: url(<%= video_article.cloudinary_video_url %>)">
            <span class="video-timestamp"><%= video_article.video_duration_in_minutes %></span>
          </div>
          <p><strong><%= video_article.title %></strong></p>
          <p class="video-username"><%= User.find(video_article.user_id).name %></p>
      </a>
    <% end %>
  </div>
  <div class="subvideos"></div>
  <div class="loading-articles" id="loading-articles">
    loading...
  </div>
</div>
