<% content_for :javascript do %>
  <%= stylesheet_link_tag "discourse-annotator/application", media: "all" %>
  <%= javascript_include_tag "discourse-annotator/application" %>
  <%= render 'annotator/lib/annotate_js', current_user: @current_user, project_id: @project.id %>
<% end %>

<% content_for :stylesheet do %>
  <style>
    <% annotations = @project.annotations.where(topic_id: @topic_view.topic.id).where.not(creator_id: @current_user.id) %>
    <% if annotations.present? %>
      <%= annotations.map {|annotation| "[data-annotation-id=\"#{annotation.id}\"]"}.join(', ').html_safe + "{ background-color: rgba(182, 223, 236, 0.3) !important; }" %>
    <% end %>

    .code {
        font-weight: bold;
        background: #E6E6E6;
        color: #909090;
        border-radius: 9px;
        padding: 2px 6px;
        font-size: .7rem;
        display: inline-block;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    /* NOTE: CSS class can't be used as then annotator no longer opens the modal. */
    /* NOTE: Background can't be used as it is overwritten by nested annotations. */
    [data-code-highlighted="1"] {
        border: 2px solid deeppink;
        margin-left: -2px;
        margin-right: -2px;
    }
  </style>
<% end %>


<header class="main-content__header" role="banner">
  <h1 class="main-content__page-title" id="topic-<%= @topic_view.topic.id %>-title">
    <%= @topic_view.topic.title %>
  </h1>

  <script>
      loadAnnotator('#topic-<%= @topic_view.topic.id %>-title', '/topic/<%= @topic_view.topic.id %>');
  </script>
</header>


<section class="main-content__body">
  <% @topic_view.posts.each do |post| %>
    <%= render '/annotator/posts/post', post: post %>
  <% end %>

  <% if @topic_view.prev_page || @topic_view.next_page %>
    <div role='navigation' itemscope itemtype='http://schema.org/SiteNavigationElement'>
      <% if @topic_view.prev_page %>
        <span itemprop='url'><%= link_to t(:prev_page), annotator_discourse_annotator_project_topic_path(project_id: @project.id, id: @topic_view.topic.id, page: @topic_view.prev_page), rel: 'prev', itemprop: 'name' %></span>
      <% end %>
      <% if @topic_view.next_page %>
        <span itemprop='url'><b><%= link_to t(:next_page), annotator_discourse_annotator_project_topic_path(project_id: @project.id, id: @topic_view.topic.id, page: @topic_view.next_page), rel: 'next', itemprop: 'name' %></b></span>
      <% end %>
    </div>
  <% end %>
</section>


<script>
    let codes = document.getElementsByClassName("code")

    for (let i = 0; i < codes.length; i++) {
        codes[i].addEventListener('click', handleCodeClick, false)
    }

    function handleCodeClick(e) {
        if (e.target.hasAttribute("data-code-highlighted")) {
            jQuery("[data-code-highlighted]").removeAttr("data-code-highlighted")
        } else {
            let codeId = e.target.getAttribute("data-code-id")
            let codeElements = document.querySelectorAll(`[data-code-id='${codeId}']`)
            jQuery("[data-code-highlighted]").removeAttr("data-code-highlighted")
            for (let i = 0; i < codeElements.length; i++) {
                codeElements[i].setAttribute('data-code-highlighted', '1');
            }
        }
    }
</script>