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

  <link rel="canonical" href="<%= app_url(request.path) %>" />
  <meta name="description" content="<%= SiteConfig.community_description %>">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">
  <meta property="og:type" content="website" />
  <meta property="og:url" content="<%= app_url(request.path) %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />
  <% if @displayed_classified_listing %>
    <meta property="og:title" content="<%= truncate @displayed_classified_listing.title, length: 54 %>">
    <meta property="og:description" content="<%= community_name %> Listing" />
    <meta property="og:image" content="<%= listing_social_image_url @displayed_classified_listing %>">
    <meta name="twitter:title" content="<%= truncate @displayed_classified_listing.title, length: 54 %>">
    <meta name="twitter:description" content="<%= community_name %> Listing">
    <meta name="twitter:image:src" content="<%= listing_social_image_url @displayed_classified_listing %>">
  <% else %>
    <meta property="og:title" content="Listings" />
    <meta property="og:description" content="<%= SiteConfig.community_description %>" />
    <meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/sa3xjflbtvt9zw0xpan5.png">
    <meta name="twitter:title" content="Listings">
    <meta name="twitter:description" content="<%= SiteConfig.community_description %>">
    <meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/sa3xjflbtvt9zw0xpan5.png">
  <% end %>
  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:card" content="summary_large_image">
<% end %>

<div class="home">
  <div class="classifieds-container" id="classifieds-index-container"
    data-category="<%= params[:category] %>" data-listings="<%= @classified_listings.to_json(
      only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
      include: {
        author: { only: %i[username name], methods: %i[username profile_image_90] }
      }
    ) %>"
    data-allcategories="<%= ClassifiedListing.categories_for_display.to_json %>"
    <% if @displayed_classified_listing %>
      data-displayedlisting="<%= @displayed_classified_listing.to_json(
          only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
          include: {
            author: { only: %i[username name], methods: %i[username profile_image_90] }
          },
      ) %> "
    <% end %>
  >
    <div class="classified-filters">
    <div class="classified-filters-categories">
      <a href="/listings" class="<%= "selected" if params[:category].blank? %> data-no-instant="true">all</a><% ClassifiedListing.categories_for_display.each do |cat| %><a href="/listings/<%= cat[:slug] %>" class="<%= "selected" if params[:category] == cat[:slug] %> data-no-instant="true"><%= cat[:name] %></a><% end %><a href='/listings/new' class='classified-create-link'>Create a Listing</a>
      <% if @displayed_classified_listing %>
        <div class="classified-listings-modal-background" role='presentation'></div>
      <% end %>
    </div>
  </div>
</div>

<%= javascript_packs_with_chunks_tag "listings", defer: true %>
