<div id="home">
  <section id="operand-company">
    <h2>Sociable Engineering;</h2>
    <blockquote>
    Ongoing research on cyber resilience and modern nomadism.
    </blockquote>

    <p>Included essays may examine:
    <ul>
      <li>accessible programming,</li>
      <li>rapid and reproducible deploys,</li>
      <li>resource minimización, and</li>
      <li>engineered communicación.</li>
    </ul>
    </p>

    <p>
      ://operand.online is produced by:
      <ul>
        <li>Calliope Youngblood</li>
        <li>@c4lliope.99 on Signal</li>
        <li><a href="mailto:inbound@operand.online">inbound@operand.online</a> on <a href="https://proton.me">Proton Mail</a></li>
        <li>based in DC, USA.</li>
      </ul>
    </p>
  </section>

  <section id="gram">
    <%= """
    ## Pro `gram`:

    Our original code is shared as a public-domain resource,
    and can be copied, remade, or reapplied as needed.

    Consumers are necessarily liable and responsible on consequence or damage.
    Please message and inquire on ideas needing inclusion.
    """ |> Render.embed |> raw %>

    <ul><%= for base <- Source.any(System.get_env("GRAM_BASE")) do %>
      <li><a href={~p"/gram/#{base}"}>
        <%= base %>
      </a></li>
    <% end %></ul>
  </section>

  <ul id="chronicle">
    <h2>Pro <code>duce</code>:</h2>

    <%= for {"chronicle-" <> _key, page} <- @streams.chronicles do %>
      <li id={page.key} style="margin-bottom: 3rem; padding: none;">
        <h2>
          <a href={~p"/chronicle/#{page.key}"} >
            <%= page.name %>
          </a>
        </h2>

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

        <p style="margin-left: 2rem;">
        <%= if page.summary do %>
          <%= page.summary |> Render.embed |> raw %>
        <% else %>
          <div id="campaign">
            <div><%= page.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>
        <% end %>
        </p>
      </li>
    <% end %>
  </ul>

</div>
