<%= content_for :page_meta do %>
  <%= render "articles/tags/meta" %>
<% end %>
<% expiry_minutes = params[:timeframe].blank? || params[:timeframe] == "latest" ? 4 : 20 %>
<% flag = true %>
<% cache("tag-stories-index-#{params}-#{flag}-#{@tag_model.updated_at}-#{user_signed_in?}", expires_in: expiry_minutes.minutes) do %>
  <style>
    .tag-header {
      border: 2px solid<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
      box-shadow: 5px 6px 0px<%= HexComparer.new([@tag_model.bg_color_hex || "#0000000", @tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
    }
  </style>
  <div class="user-profile-header tag-header">
    <div class="tag-or-query-header-container">
      <h1>
        <% if @tag_model.badge_id && @tag_model.badge %>
            <img src="<%= cloudinary @tag_model.badge.badge_image_url, 180 %>" style="transform: rotate(<%= -25 + (@tag_model.id.digits.first * 5) %>deg" />
        <% end %>
        <% if @tag_model && @tag_model.pretty_name.present? %>
          <%= @tag_model.pretty_name %>
        <% else %>
          <%= @tag %>
        <% end %>
        <% if @tag_model %>
            <span class="user-profile-follow-button-wrapper">
              <button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= @tag_model.text_color_hex %>;background-color:<%= @tag_model.bg_color_hex %>" data-info='{"id":<%= @tag_model.id %>,"className":"Tag"}'>&nbsp;</button>
            </span>
        <% end %>
      </h1>
    </div>
  </div>
  <div class="home sub-home" id="index-container"
      data-params="<%= params.merge(sort_by: "hotness_score", sort_direction: "desc").to_json(only: %i[tag username sort_by sort_direction]) %>" data-which=""
      data-tag="<%= @tag %>"
      data-feed="<%= params[:timeframe] || "base-feed" %>"
      data-requires-approval="<%= @tag_model.requires_approval %>"
      data-articles-since="<%= Timeframer.new(params[:timeframe]).datetime&.iso8601 %>">
    <%= render "articles/tags/sidebar" %>
    <div class="articles-list" id="articles-list">
      <% if @tag_model && @tag_model.supported %>
        <style>
          .nav-chronofiter-link.selected, .nav-chronofiter-link:hover {
            background: <%= @tag_model.bg_color_hex %> !important;
            color: <%= @tag_model.text_color_hex %> !important;
            box-shadow: 3px 4px 0px <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
            border: 1px solid <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
          }

          .narrow-nav-menu a.selected {
            color: <%= @tag_model.text_color_hex %> !important;
            background: <%= @tag_model.bg_color_hex %> !important;
          }

          .on-page-nav-controls .separator {
            border-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
          }
        </style>
      <% end %>
      <div class="on-page-nav-controls" id="on-page-nav-controls">
        <div class="on-page-nav-label sub-home-nav">
          <div class="wide-nav-links">
            <a class="nav-chronofiter-link <%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" href="<%= list_path %>/">
              FEED
            </a>
            <span class="separator"></span>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("week") %>" href="<%= list_path %>/top/week">
              WEEK
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("month") %>" href="<%= list_path %>/top/month">
              MONTH
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("year") %>" href="<%= list_path %>/top/year">
              YEAR
            </a>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("infinity") %>" href="<%= list_path %>/top/infinity">
              INFINITY
            </a>
            <span class="separator"></span>
            <a class="nav-chronofiter-link <%= "selected" if timeframe_check("latest") %>" href="<%= list_path %>/latest">
              LATEST
            </a>
          </div>
          <div class="narrow-nav-select" aria-label="feed-filter-select">
            <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %>
              <button type="button" id="narrow-feed-butt">&lt;MY <%= community_name %> FEED&gt;</button>
            <% elsif timeframe_check('week') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST WEEK&gt;</button>
            <% elsif timeframe_check('month') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST MONTH&gt;</button>
            <% elsif timeframe_check('year') %>
              <button type="button" id="narrow-feed-butt">&lt;PAST YEAR&gt;</button>
            <% elsif timeframe_check('infinity') %>
              <button type="button" id="narrow-feed-butt">&lt;INFINITY&gt;</button>
            <% elsif timeframe_check('latest') %>
              <button type="button" id="narrow-feed-butt">&lt;LATEST&gt;</button>
            <% end %>
          </div>
        </div>
        <button class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
          <img src="<%= asset_path "stack.svg" %>" alt="left-sidebar-nav">
        </button>
        <button class="on-page-nav-butt on-page-nav-butt-right" id="on-page-nav-butt-right" aria-label="nav-button-right">
          <img src="<%= asset_path "lightning.svg" %>" alt="right-sidebar-nav">
        </button>
      </div>

      <div class="substories" id="substories">
        <%# articles/tags/main_feed will iterate on stories with .each_with_index,
            thus by using .present? here we preload the items %>
        <% if @stories.present? %>
          <%= render "articles/tags/main_feed" %>
        <% end %>
      </div>
      <div class="loading-articles" id="loading-articles">
        loading...
      </div>
    </div>
    <%= render "articles/tags/sidebar_additional" %>
  </div>

  <%= render "stories/narrow_nav_menu" %>
  <%= render "stories/stories_list_script" %>
<% end %>
