<body>
    <div class="wrapper"><div class="container-fluid">
      <div class="row row-border-red">
        <div class="col-12 col-md-2 border-right-red py-3 px-4">
          <div class="d-flex align-item-center flex-column h-100">
            <a href="/">
              <img src="<%= Routes.static_path(@conn, "/images/logo.svg") %>" width="100%" height="auto" alt="OpenPod" />
            </a>
          </div>
        </div>
      </div>
      <div class="row row-border-red row-central">
        <div class="col-12 col-md-2 border-right-red d-flex justify-content-center"></div>
        <div class="col-12 col-md-8">
          <h3 class="my-md-3 my-0 py-3 py-md-0">
            Chi lo sta già usando?
          </h3>
        </div>
      </div>
      <%= for podder <- @podders do %>
        <div class="row row-border-red">
          <div class="col-12 col-md-2 border-right-red d-flex flex-column align-items-center justify-content-start">
          </div>
          <div class="col-12 col-md-3 pt-3 pb-3">
            <img class="img-fluid" src="<%= podder.image.url %>">
          </div>
          <div class="col-12 col-md-4 pt-3">
            <div class="d-flex align-items-center mb-2">
              <h4 class="m-0 mr-2 mt-1"><%= podder.title %></h4>
              <a role="button" href="<%= podder.podcast_url %>" target="_blank" class="btn btn-sm btn-danger"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-rss-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5a1 1 0 0 0 0 2 8 8 0 0 1 8 8 1 1 0 1 0 2 0c0-5.523-4.477-10-10-10zm0 4a1 1 0 0 0 0 2 4 4 0 0 1 4 4 1 1 0 1 0 2 0 6 6 0 0 0-6-6zm.5 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
              </svg></a>
            </div>
            <div class="author"><a href="<%= podder.link %>" target="_blank"><%= podder.author %></a></div>
            <p><%= sanitize podder.description, :basic_html %></p>
          </div>
        </div>
      <% end %>

      <div class="row">
        <div class="col-12 d-flex align-items-center">
          <p class="my-2">
            Una produzione dalla galassia
            <a href="https://offtopiclab.org">Off Topica</a> / ospitati dal
            <a href="https://unit.abbiamoundominio.org/">Collettivo Unit</a> /
            codice sorgente su
            <a href="https://git.lattuga.net/offtopic/open-pod">git.lattuga.net/offtopic/open-pod</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
