<% content_for(:title) do %>
  <%= @article.title %>
<% end %>

<% content_for(:keywords) do %>
  <%= @article.tags.map{|t| t.name}.join(", ") %>
<% end %>

<% content_for(:description) do %>
  <%= @article.issue_description %>
<% end %>

<% content_for(:meta) do %>
    <meta property="og:title" content="<%= @article.title %>">
    <meta property="og:description" content="<%= @article.issue_description %>">
    <meta property="og:image" content="<%= @article.images.first || default_image_url %>">
    <meta property="og:url" content="<%= article_url @article %>">
    <meta property="og:site_name" content="KB">


    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="<%= article_url(@article) %>">
    <meta name="twitter:title" content="<%= @article.title %>">
    <meta name="twitter:description" content="<%= @article.issue_description %>">
    <meta name="twitter:image" content="<%= @article.images.first || default_image_url %>">
<% end %>

<%
  user = @article.user
%>

<div class="space-y-4 lg:space-y-0 lg:flex lg:space-x-4">
  <div class="lg:flex-auto">
    <div class="border border-color-primary rounded-primary">
      <div class="padding-primary space-y-2 lg:space-y-4" data-controller='bookmarks comments'>
        <ul class="relative z-0 divide-y divide-gray-200" >
          <%= render partial: "articles/article", object: @article, locals: {t: false} %>
        </ul>


        <div class="rounded-primary padding-primary">
          <div class="mb-4">
            <h2 class="text-sm leading-5 font-semibold">Issue</h2>
          </div>

          <div class="my-2 markdown font-serif">
            <%= @article.issue_md.html_safe  %>   
          </div>

        </div>
        <% if current_user %>
          <% if @article.solution.present? %>
            <div class="rounded-primary padding-primary">
              <div class="mb-4">
                <h2 class="text-sm leading-5 font-semibold">Resolution</h2>
              </div>

              <div class="my-2 markdown font-serif">
                <%= @article.solution_md.html_safe  %>   
              </div>

            </div>
          <% end %>

          <% if @article.root_cause.present? %>
            <div class="rounded-primary padding-primary">
              <div class="mb-4">
                <h2 class="text-sm leading-5 font-semibold">Root Cause</h2>
              </div>

              <div class="my-2 markdown font-serif">
                <%= @article.root_cause_md.html_safe  %>   
              </div>

            </div>
          <% end %>

          <% if @article.diagnostic_steps.present? %>
            <div class="rounded-primary padding-primary">
              <div class="mb-4">
                <h2 class="text-sm leading-5 font-semibold">Diagnostic Steps</h2>
              </div>

              <div class="my-2 markdown font-serif">
                <%= @article.diagnostic_steps_md.html_safe  %>   
              </div>

            </div>
          <% end %>

          <div class="rounded-primary padding-primary">
            <div class="mb-4">
              <h2 class="text-sm leading-5 font-semibold">Verified Status</h2>
            </div>

            <div class="my-2 text-sm text-gray-500">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium text-red-800">
                <%= @article.verified_status.humanize  %>
              </span>
            </div>

          </div>

          <div class="rounded-primary padding-primary">
            <div class="mb-4">
              <h2 class="text-sm leading-5 font-semibold">Versions affected</h2>
            </div>

            <div class="my-2 text-sm">
              <%@article.versions.each do |version| %>
                <span class="btn-tag"><%= version.name %></span>
              <% end %>   
            </div>

          </div>

          <div class="rounded-primary padding-primary">
            <div class="mb-4">
              <h2 class="text-sm leading-5 font-semibold">Impact</h2>
            </div>

            <div class="my-2 text-sm text-gray-500">
              <%= @article.impact  %>   
            </div>

          </div>

          <div class="rounded-primary padding-primary">
            <div class="mb-4">
              <h2 class="text-sm leading-5 font-semibold">Backtrack Link</h2>
            </div>

            <div class="my-2 text-sm text-blue-500">
              <% if @article.present? %>
                <%=link_to @article.backtrack_link, @article.backtrack_link, target: '_blank' %>   
              <% end %>
            </div>

          </div>
        <% else %>
          <%= render partial: 'pending_access' %>
        <% end %>

        <%= render partial: 'meta' %>

        <div class="rounded-primary padding-primary">
          <div class="my-2 text-sm text-gray-500">
              <div class="flex flex-wrap justify-center">
                <div data-controller="likes" data-target="likes.container" class="mr-4">
                  <%= render partial: "articles/useful" %>
                </div>
              </div>
          </div>
        </div>


        <div class="rounded-primary padding-primary">
          <div class="mb-4">
            <h2 class="text-sm leading-5 font-semibold"><%= t("comments") %></h2>
          </div>
          <% if @comments.present? %>
            <ul class="my-2 " data-target='comments.list'>
              <% @comments.each do |comment| %>
                <%= render partial: "comments/comment", locals: {comment: comment} %>
              <% end %>
            </ul>
          <% else %>
            <div class="my-2 text-sm text-gray-500"><%= t("empty_data") %></div>
          <% end %>
        </div>
        <%= render partial: 'comments/form', locals: { article: @article } %>
      </div>
    </div>
  </div>
  <div class="lg:w-80 lg:flex-shrink-0">
    <% if @article.inboxes.where(box_type: "Approve").present? %>
    <div class="border border-color-primary rounded-primary">
      <div class="bg-primary rounded-t-md border-b border-color-primary padding-primary">
        <div class="flex justify-between items-center">
          <h3 class="mr-2 text-medium leading-6 font-medium text-gray-900 py-1">
            <%= t("approvers") %>
          </h3>
        </div>
      </div>
      <div class="padding-primary py-4">
        <div class="pb-8 lg:pb-12 lg:border-gray-200">
          <div class="w-full items-center justify-between">
            <div class="space-y-2 lg:space-y-4">
              <% @article.inboxes.where(box_type: "Approve").each do |inbox| %>
                <div class="flex items-center space-x-2">
                  <div class="flex-shrink-0">
                    <%= lavatar_tag(inbox.from_user.letter_char, 16, class: "h-12 w-12 rounded-full") %>
                  </div>
                  <div class="space-y-1 lg:space-y-2">
                    <div class="text-lg leading-5 font-medium text-gray-900">@<%= inbox.from_user.username %></div>
                  </div>
                </div>
              <% end %>

            </div>
          </div>
        </div>
      </div>
    </div>
    <% end %>

    <div class="mt-3 border border-color-primary rounded-primary">
      <div class="bg-primary rounded-t-md border-b border-color-primary padding-primary">
        <div class="flex justify-between items-center">
          <h3 class="mr-2 text-medium leading-6 font-medium text-gray-900 py-1">
            <%= t("user_profile") %>
          </h3>
        </div>
      </div>
      <div class="padding-primary py-4">
        <div class="pb-8 lg:pb-12 lg:border-gray-200">
          <div class="w-full items-center justify-between">
            <div class="space-y-2 lg:space-y-4">
                <div class="flex items-center space-x-2">
                  <div class="flex-shrink-0">
                    <%= lavatar_tag(user.letter_char, 16, class: "h-12 w-12 rounded-full") %>
                  </div>
                  <div class="space-y-1 lg:space-y-2">
                    <div class="text-lg leading-5 font-medium text-gray-900">@<%= user.username %></div>
                  </div>
                </div>
              <!-- Action buttons -->
              <div class="space-y-2 lg:space-y-4">
                <div class="text-sm leading-5 text-gray-900"><%= user.about %></div>
  
              </div>
              <div class="space-y-2 lg:space-y-4">
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
