<%= javascript_tag do %>


  window.addEventListener('DOMContentLoaded', (event) => {
    let mobile_view = document.querySelector(".nav-bar-header-mobile")
    let desktop_view = document.querySelector(".nav-bar-header-desktop")
    let card_body = document.querySelector(".card_body_marg")
    const view_size = () => {
      if (window.innerWidth < 415){
          mobile_view.style.display = "block"
          desktop_view.style.display = "none"
          card_body.style.cssText = "margin:8px!important;"
          } else {
          mobile_view.style.display = "none"
          desktop_view.style.display = "block"
          card_body.style.cssText = "margin:40px!important;"
      }
    }
    view_size()

  window.addEventListener("resize", () => {
    view_size()
  })
  })
<% end %>

<div style="display:none;" class="nav-bar-header-desktop">
  <%= pb_rails("background", props: { background_color: "white", padding_bottom: "none", padding_top: "md" }) do %>
    <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", padding_left:"lg", padding_right:"lg", wrap: true }) do %>
      <%= pb_rails("nav", props: { margin_left: "md" ,orientation: "horizontal",}) do %>
        <%= pb_rails("nav/item", props: { text: "Explore", link: "#" }) %>
        <%= pb_rails("nav/item", props: { text: "Topics", link: "#" }) %>
        <%= pb_rails("nav/item", props: { text: "Trending ", link: "#", active: true  }) %>
        <%= pb_rails("nav/item", props: { text: "Collections", link: "#" }) %>
        <%= pb_rails("nav/item", props: { text: "Events", link: "#" }) %>
        <%= pb_rails("nav/item", props: { text: "Sponsors", link: "#" }) %>
      <% end %>
      <%= pb_rails("button", props: { text: "Get email updates", margin_right:"md" }) %>
    <% end %>
  <% end %>
  <%= pb_rails("section_separator") %>
</div>
<div style="display:none;" class="nav-bar-header-mobile">
  <%= pb_rails("background", props: { background_color: "white", padding_bottom: "none", padding_top: "md" }) do %>
    <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between", padding_left:"lg", padding_right:"lg", wrap: true }) do %>
      <%= pb_rails("nav", props: { margin_left: "md" ,orientation: "horizontal",}) do %>
        <%= pb_rails("nav/item", props: { text: "Explore", link: "#" }) %>
        <%= pb_rails("nav/item", props: { text: "Trending ", link: "#", active: true  }) %>
      <% end %>
    <% end %>
  <% end %>
  <%= pb_rails("section_separator") %>
</div>

<div class="trending-section">
  <%= pb_rails("flex", props: { padding:"xl", orientation: "column", horizontal: "center"}) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("title", props: { text: "Trending", tag: "h1", size: 1 }) %>
    <% end %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("body", props: {
            text: "See what the kodemonkey community is most excited about today.",
            color: "light"
        }) %>
    <% end %>
  <% end %>
</div>


<div class="cards-body">
  <%= pb_rails("section_separator") %>

  <%= pb_rails("background", props: { background_color: "white", padding: "sm" }) do %>
   <div class="main-card-desktop">
    <%= pb_rails("card", props: { classname:"card_body_marg", padding:"none", margin:"xl" })  do %>

      <%= pb_rails("background", props: { background_color: "light"}) do %>
        <%= pb_rails("flex", props: { spacing:"between", wrap: true }) do %>
            <%= pb_rails("nav", props: { orientation: "horizontal"}) do %>
              <%= pb_rails("nav/item", props: { text: "Repositories", link: "#", active: true }) %>
              <%= pb_rails("nav/item", props: { text: "Developers", link: "#" }) %>
            <% end %>


          <div class="p_sm">
            <%= pb_rails("flex", props: { spacing:"evenly", horizontal: "right", wrap: true}) do %>
              <%= pb_rails("flex/flex_item", props: {padding_right:"lg"}) do %>
                <%= "Spoken Language:" %>
                <%= pb_rails("title", props: {tag:"span",text: "Any", size: 4 }) %><span>&#9662;<span>
              <% end %>
              <%= pb_rails("flex/flex_item", props: {padding_right:"lg"}) do %>
                <%= "Language:" %>
                <%= pb_rails("title", props: {tag:"span",text: "Any", size: 4 }) %><span>&#9662;<span>
              <% end %>
              <%= pb_rails("flex/flex_item", props: {padding:"none"}) do %>
                <%= "Date Range:" %>
                <%= pb_rails("title", props: {tag:"span",text: "Today", size: 4 }) %><span>&#9662;<span>
              <% end %>
            <% end %>
          </div>
        <% end %>
      <% end %>

      <%= pb_rails("section_separator") %>

      <div class="p_sm">
        <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <h3>
              <%= pb_rails("icon", props: { icon: "book", fixed_width: true }) %>
              <%= link_to "themsaid / ibis" %>
              </h3>
            <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("button", props: { variant: "secondary" }) do %>
                <%= pb_rails("icon", props: { icon: "star" }) %>
                  <span>Star</span>
              <% end %>
            <% end %>
          <% end %>

          <%= pb_rails("flex/flex_item", props: { padding_bottom: "xs" }) do %>
            A PHP tool that helps you write eBooks in markdown and convert to PDF.
          <% end %>

          <%= pb_rails("flex", props: { classname: "flex-container", spacing: "between" }) do %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("flex", props: { wrap: true}) do %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("legend", props: { color: "data_1", text: "HTML", padding_right: "xs" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: { padding_right: "sm", icon: "star", text: "2,278" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: {  padding_right: "sm", icon: "bezier-curve", text: "1,366" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("flex") do %>
                  <%= pb_rails("flex/flex_item", props: {  padding_right: "sm"}) do %>
                    <%= pb_rails("body", props: { text: "Built by", color: "light" }) %>
                  <% end %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("multiple_users", props: { classname: "ml-3",
                        users: [
                          {
                            name: "Patrick Welch",
                            image_url: "https://randomuser.me/api/portraits/men/9.jpg",
                          },
                          {
                            name: "Lucille Sanchez",
                            image_url: "https://randomuser.me/api/portraits/women/6.jpg",
                          },
                          {
                            name: "Beverly Reyes",
                            image_url: "https://randomuser.me/api/portraits/women/74.jpg",
                          },
                          {
                            name: "Keith Craig",
                            image_url: "https://randomuser.me/api/portraits/men/40.jpg",
                          },
                          {
                            name: "Alicia Cooper",
                            image_url: "https://randomuser.me/api/portraits/women/46.jpg",
                          }
                        ]
                        }) %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("icon_value", props: { icon: "star", text: "402 stars today" }) %>
            <% end %>
          <% end %>
        <% end %>
      </div>

      <%= pb_rails("section_separator") %>

      <div class="p_sm">
        <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <h3>
              <%= pb_rails("icon", props: { icon: "book", fixed_width: true }) %>
              <%= link_to "l1ving / youtube-dl" %>
              </h3>
            <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("button", props: { variant: "secondary" }) do %>
                <%= pb_rails("icon", props: { icon: "star" }) %>
                  <span>Star</span>
              <% end %>
            <% end %>
          <% end %>

          <%= pb_rails("flex/flex_item", props: { padding_bottom: "xs" }) do %>
            A fork of youtube-dl, for archival purposes.
          <% end %>

          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("flex", props: { wrap: true}) do %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("legend", props: {  padding_right: "xs", color: "data_2", text: "Python" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: {  padding_right: "sm", icon: "star", text: "2,278" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: {  padding_right: "sm", icon: "bezier-curve", text: "1,366" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("flex") do %>
                  <%= pb_rails("flex/flex_item", props: { }) do %>
                    <%= pb_rails("body", props: { padding_right: "sm", text: "Built by", color: "light" }) %>
                  <% end %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("multiple_users", props: { padding_right: "sm",
                        users: [
                          {
                            name: "Patrick Welch",
                            image_url: "https://randomuser.me/api/portraits/men/12.jpg",
                          },
                          {
                            name: "Lucille Sanchez",
                            image_url: "https://randomuser.me/api/portraits/women/15.jpg",
                          },
                          {
                            name: "Beverly Reyes",
                            image_url: "https://randomuser.me/api/portraits/women/17.jpg",
                          },
                          {
                            name: "Keith Craig",
                            image_url: "https://randomuser.me/api/portraits/men/18.jpg",
                          },
                          {
                            name: "Alicia Cooper",
                            image_url: "https://randomuser.me/api/portraits/women/19.jpg",
                          }
                        ]
                        }) %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("icon_value", props: { icon: "star", text: "172 stars today" }) %>
            <% end %>
          <% end %>
        <% end %>
      </div>

      <%= pb_rails("section_separator") %>

      <div class="p_sm">
        <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <h3>
              <%= pb_rails("icon", props: { icon: "book", fixed_width: true }) %>
              <%= link_to "apache / incubator-nuttx" %>
              </h3>
            <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("button", props: { variant: "secondary" }) do %>
                <%= pb_rails("icon", props: { icon: "star" }) %>
                  <span>Star</span>
              <% end %>
            <% end %>
          <% end %>

          <%= pb_rails("flex/flex_item", props: { padding_bottom: "xs" }) do %>
            Apache NuttX is a mature, real-time embedded operating system (RTOS).
          <% end %>

          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("flex", props: { wrap: true}) do %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("legend", props: { padding_right: "xs", color: "data_3", text: "C" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: { padding_right: "sm", icon: "star", text: "2,278" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: { padding_right: "sm", icon: "bezier-curve", text: "1,366" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("flex") do %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("body", props: { padding_right: "sm", text: "Built by", color: "light" }) %>
                  <% end %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("multiple_users", props: { classname: "ml-3",
                        users: [
                          {
                            name: "Patrick Welch",
                            image_url: "https://randomuser.me/api/portraits/men/20.jpg",
                          },
                          {
                            name: "Lucille Sanchez",
                            image_url: "https://randomuser.me/api/portraits/women/22.jpg",
                          },
                          {
                            name: "Beverly Reyes",
                            image_url: "https://randomuser.me/api/portraits/women/23.jpg",
                          },
                          {
                            name: "Keith Craig",
                            image_url: "https://randomuser.me/api/portraits/men/24.jpg",
                          },
                          {
                            name: "Alicia Cooper",
                            image_url: "https://randomuser.me/api/portraits/women/29.jpg",
                          }
                        ]
                        }) %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("icon_value", props: { icon: "star", text: "302 stars today" }) %>
            <% end %>
          <% end %>
        <% end %>
      </div>

      <%= pb_rails("section_separator") %>

      <div class="p_sm">
        <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <h3>
              <%= pb_rails("icon", props: { icon: "book", fixed_width: true }) %>
              <%= link_to "jofpin / trape" %>
              </h3>
            <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("button", props: { variant: "secondary" }) do %>
                <%= pb_rails("icon", props: { icon: "star" }) %>
                  <span>Star</span>
              <% end %>
            <% end %>
          <% end %>

          <%= pb_rails("flex/flex_item", props: { padding_bottom: "xs" }) do %>
            Learning to scrape using the trape tool.
          <% end %>

          <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("flex", props: { wrap: true}) do %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("legend", props: { padding_right:"xs", color: "data_2", text: "Python" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: { padding_right:"sm", icon: "star", text: "2,278" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("icon_value", props: { padding_right:"sm", icon: "bezier-curve", text: "1,366" }) %>
              <% end %>
              <%= pb_rails("flex/flex_item") do %>
                <%= pb_rails("flex") do %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("body", props: { padding_right:"sm", text: "Built by", color: "light" }) %>
                  <% end %>
                  <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("multiple_users", props: { classname: "ml-3",
                        users: [
                          {
                            name: "Patrick Welch",
                            image_url: "https://randomuser.me/api/portraits/men/30.jpg",
                          },
                          {
                            name: "Lucille Sanchez",
                            image_url: "https://randomuser.me/api/portraits/women/31.jpg",
                          },
                          {
                            name: "Beverly Reyes",
                            image_url: "https://randomuser.me/api/portraits/women/32.jpg",
                          },
                          {
                            name: "Keith Craig",
                            image_url: "https://randomuser.me/api/portraits/men/33.jpg",
                          },
                          {
                            name: "Alicia Cooper",
                            image_url: "https://randomuser.me/api/portraits/women/34.jpg",
                          }
                        ]
                        }) %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
            <%= pb_rails("flex/flex_item") do %>
              <%= pb_rails("icon_value", props: { icon: "star", text: "789 stars today" }) %>
            <% end %>
          <% end %>
        <% end %>
        </div>
      <% end %>
  <% end %>
</div>