<% title "Edit #{@tag.name}" %>

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

<style>
  .widget header {
    color: <%= HexComparer.new([@tag.bg_color_hex || "#0000000", @tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
  }

  .slanty-accent {
    background-color: <%= HexComparer.new([@tag.bg_color_hex || "#ffffff"]).accent %>
  }

  .tag-edit-tag {
    text-align: center;
    color: <%= @tag.text_color_hex %>;
  }
</style>
<br>
<br>
<br>
<div class="user-profile-header tag-header" style="background-color:<%= @tag.bg_color_hex %>;color:<%= @tag.text_color_hex %>;">
  <div class="slanty-accent"></div>
  <div class="tag-or-query-header-container tag-edit-tag">
    <h1> Editing:
      <a href="/t/<%= @tag.name %>" style="color: <%= @tag.text_color_hex %>;text-decoration: underline;"><%= @tag.name %></a>
    </h1>
    <p>
      <code style="background-color: #D2D2D2; color: black; padding: 5px; border-radius: 5px;">#<%= @tag.name %></code> is the name of the tag used in Markdown.
    </p>
  </div>
</div>
<%= form_tag("/tag/#{@tag.id}", method: :patch, class: "tag-edit-form") do %>
  <div class="tag-edit-container">
    <% if flash[:success] %>
      <p class="tag-edit-flash-success">
        <%= flash[:success] %>
      </p>
    <% elsif flash[:error] %>
      <ul class="tag-edit-flash-error">
        <% flash[:error].each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    <% end %>
    <h4>
      <a target="_blank" rel="noopener" href="https://thepracticaldev.s3.amazonaws.com/i/cc8vz48djnhty6c31jog.png">
        Click here to see an example of attributes.
      </a>
    </h4>
    <div class="tag-form-field">
      <%= label_tag :pretty_name %>
      <br>
      <%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: "This is the name at the top of the show page.", class: "tag-form-text-field" %>
    </div>
    <div class="tag-form-field">
      <%= label_tag :bg_color_hex %>
      <br>
      <%= text_field_tag "tag[bg_color_hex]", @tag.bg_color_hex, placeholder: "Click for color picker", class: "tag-form-text-field color-picker" %>
      <div class="color-palette"></div>
    </div>
    <div class="tag-form-field">
      <%= label_tag :text_color_hex %>
      <br>
      <%= text_field_tag "tag[text_color_hex]", @tag.text_color_hex, placeholder: "Click for color picker", class: "tag-form-text-field color-picker" %>
      <div class="color-palette"></div>
    </div>
    <div class="tag-form-field">
      <%= label_tag :short_summary %>
      <br>
      <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: "Brief overview of what this tag is all about.", class: "tag-form-text-field tag-area-text" %>
    </div>
    <div class="tag-form-field">
      <%= label_tag :wiki_body_markdown %>
      <br>
      <%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: "This is an 'about' section. Feel free to add an FAQ, additional resources, etc.", class: "tag-form-text-field tag-area-text" %>
    </div>
    <div class="tag-form-field">
      <%= label_tag :rules_markdown %>
      <br>
      <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: "Optional - Can be used for challenges, i.e. submission guidelines.", class: "tag-form-text-field tag-area-text" %>
    </div>
    <div class="tag-form-field">
      <%= submit_tag "SAVE CHANGES", class: "tag-edit-submit" %>
    </div>
  </div>
<% end %>

<% if current_user.has_role?(:super_admin) || current_user.has_role?(:admin) %>
  <center>
    <h1><a href="/internal/tags/<%= @tag.id %>" data-no-instant><%= @tag.name %> admin</a></h1>
    <br />
    <br />
    <br />
  </center>
<% end %>
