openaustralia/planningalerts

<% content_for :footer_illustration do %>
  <%= image_tag "tailwind/illustration/bottom-of-page-man.svg", alt: "" %>
<% end %>

<%= render Tailwind::Heading.new(tag: :h1) do %>
  Review and publish
<% end %>

<%# TODO: Make sure that there is consistency on formatting of h1, h2, h3, etc. across the site %>
<%# TODO: Using non-standard font %>
<%= render Tailwind::Heading.new(tag: :h2, font: "sans", extra_classes: "mt-14").with_content("Your comment") %>
<p class="mb-10 text-xl text-navy">
  Does this look right? This is what other people will see on Planning Alerts when you publish.
</p>

<%# TODO: Can we use the comments partial here so that we can make sure it has consistent formatting? %>
<%= render Tailwind::QuotedBlock.new do %>
  <%= render Tailwind::Prose.new do %>
    <%= comment_as_html(@comment.text) %>
  <% end %>

  <%# TODO: Smaller line height? %>
  <div class="mt-8 text-xl font-bold text-navy">
    <%= @comment.name %>
  </div>
  <p class="text-xl font-bold text-navy">(Your address is automatically hidden when published on our website)</p>

  <div class="mt-12">
    <%= render Tailwind::ButtonComponent.new(tag: :a, size: "xl", type: :secondary, href: application_path(@comment.application, anchor: "add-comment"), icon: :edit).with_content("Edit comment") %>
  </div>

  <div class="mt-4">
    <%= form_with(url: publish_application_comment_path(@comment), builder: FormBuilders::Tailwind) do %>
      <%= render Tailwind::ButtonWithSideText.new(tag: :button, size: "xl", type: :primary) do |c| %>
        Publish
        <% c.with_side_text do %>
          and send to <%= @comment.comment_recipient_full_name %>
        <% end %>
      <% end %>
    <% end %>
  </div>
<% end %>

<section class="pt-12 mt-12 border-t border-dashed border-cool-blue-gray">
  <%# TODO: Using non-standard font %>
  <%= render Tailwind::Heading.new(tag: :h2, font: "sans") do %>
    Preview of email to be sent to <%= @comment.comment_recipient_full_name %>
  <% end %>

  <p class="my-4 text-xl text-navy">
    Nobody but you and <%= @comment.comment_recipient_full_name %> will see this email.
  </p>

  <%# TODO: Don't use random gray colour #ccc here %>
  <div class="p-8 mt-8 text-xl sm:py-16 sm:px-20 text-navy bg-random-gray">
    <p>To: <%= @comment.application.comment_email_with_fallback %></p>
    <p>Subject: <%= t("comment_mailer.notify_authority.subject", council_reference: @comment.application.council_reference) %></p>

    <div class="mt-8 prose prose-xl max-w-none prose-tr:border-none prose-hr:border-[#ccc] prose-td:py-0 prose-th:w-56 prose-table:text-xl prose-tr:flex sm:prose-tr:table-row prose-tr:flex-col prose-td:pl-0 sm:prose-td:pl-3 prose-h3:text-2xl">
      <%= render "comment_mailer/notify_authority", comment: @comment %>
    </div>
  </div>

  <div class="relative flex justify-end -top-4">
    <div class="max-w-3xl">
      <%= render Tailwind::ExplanationBox.new do %>
        <%= render Tailwind::Heading.new(tag: :h3, color: "white", font: "sans").with_content("Why do we include the privacy notice?") %>

        <p class="mt-6">
          Different planning authorities handle your private information (email address and street address) in
          all kinds of different ways.
        </p>
        <p class="mt-6">
          This privacy notice is our attempt to force planning authorities
          to give you the same privacy protection as provided by Planning Alerts and force them to ask
          for your active consent if they want to publish or pass on your private information.
        </p>
      <% end %>
    </div>
  </div>
</section>