<a class="no-render" href={~p"/chronicle"}>← Chronicle</a>

<div id="chronicle">
  <h1><%= @page.name %></h1>

  <div>
    <%= if @page.summary do %>
      <blockquote><%= @page.summary |> Render.embed |> raw %></blockquote>
    <% end %>
  </div>

  <div class="byline">
    <p>
    by <%= @page.composer %>
    <br/><time><%= @page.day %></time>
    </p>
    <p>Labeled as:<br/><%= Enum.join((@page.labels || []), ", ") %></p>
  </div>

  <div id="campaign">
    <div><%= @body |> Render.embed |> raw %></div>

    <%= if @page.campaign do %>
      <script src="https://donorbox.org/widget.js" paypalExpress="false"></script> <iframe src={"https://donorbox.org/embed/#{@page.campaign}"} name="donorbox" allowpaymentrequest="allowpaymentrequest" seamless="seamless" frameborder="0" scrolling="no" height="900px" style="max-width: 500px; min-width: 250px; max-height:none!important" allow="payment"></iframe>
    <% end %>
  </div>

  <%= for msg <- @messages do %>
    <h3 style="display: flex; flex-direction: column;">
      <span><%= msg.inserted_at |> to_string |> String.replace("T", " @ ") |> String.split(".") |> hd %></span>
      <span><%= msg.handle %> said:</span>
    </h3>
    <blockquote><%= msg.body %></blockquote>
  <% end %>
</div>

<div style="margin-top: 2rem" >
  <a class="no-render" href={~p"/chronicle"} >← Chronicle</a>
</div>
