---
import Layout from '@layouts/Layout.astro';
import AddNewService from '@components/things/AddNewService.svelte';

import { fetchGitHubStats } from '@utils/fetch-repo-info'
import { formatDate } from '@utils/dates-n-stuff';

const commits = (await fetchGitHubStats('lissy93/awesome-privacy') || {}).commits;

---

<Layout title="Awesome Privacy">
  <section>
    <h2>About our Data</h2>
    <p class="about-data">
      All data on Awesome Privacy is community maintained via Git,
      this keeps everything transparent, and means anyone can submit edits.
      You can learn more about how our data is managed on our <a href="/about#our-data">about page</a>.
      <br /><br />
      You can make ammendments/additions/removals simply by editing the
      <a href="github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml">awesome-privacy.yml</a> file.
      <br />
      Before you proceed, please first read our <a href="https://github.com/Lissy93/awesome-privacy/blob/main/.github/CONTRIBUTING.md">Contributing Docs</a>
      <br /><br />
      Awesome Privacy is a community-maintained resource, it's thanks to
      contributors like you, that it's able to grow and stay up to date 💜
    </p>
  </section>
  <section>
    <h2>Submit an Addition</h2>
    <AddNewService client:load />
  </section>

  <section>
    <h2>Submit a Removal Request</h2>
    <p>
      You can submit a removal request by browsing to a given service's page,
      and clicking the "Request Removal" button.
      This will open a form where you can justify your reasoning, to get it 
      deleted from the <a href="github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml">awesome-privacy.yml</a> file.
    </p>
  </section>

  <section>
    <h2>Edit a Listing</h2>
    <p>
      Edits are welcome! All data is located in
      <a href="github.com/lissy93/awesome-privacy/blob/main/awesome-privacy.yml">awesome-privacy.yml</a>.
      <br>
      To modify an entry, navigate to it's page, scroll to the bottom, and click "Edit".
      This will take you to directly to the relevant lines in the file, where you can make your changes.
    </p>
  </section>

  <section>
    <h2>Checklist</h2>
    <ul>
      <li>You must read the <a href="https://github.com/Lissy93/awesome-privacy/blob/main/.github/CONTRIBUTING.md">Contributing</a> guidelines before proceeding</li>
      <li>All listing must meed our <a href="/about#creteria">Criteria</a> to be considered privacy-respecting</li>
      <li>Double check that your changes haven't already been proposed</li>
      <li>If you're associated with a service included, you must declare your affiliation</li>
      <li>Before commiting changes, ensure the YAML syntax is valid and it complies with our schema</li>
      <li>Please complete the issue or PR description template in full, do not remove any fields</li>
      <li>All submissions must be made via <a href="https://github.com/Lissy93/awesome-privacy">our GitHub</a>, do not email/PM maintainers</li>
    </ul>
  </section>

  {commits && commits.length > 0 && (
  <section>
    <h2>Recent Changes</h2>
    <p class="about-data">
      You can view a full ledger of all updates made
      at <a href="https://github.com/lissy93/awesome-privacy">github.com/lissy93/awesome-privacy</a>
    </p>
    <ul class="commit-log">
      {commits.map((commit) => (
        <li title={commit.sha}>
          {commit.message}<br />
          <img width="14" src={commit.authorAvatar} />
          <small>
            By <a href={`https://github.com/${commit.authorUsername}`}>{commit.authorName || commit.authorUsername}</a>
            on <a href={`https://github.com/Lissy93/awesome-privacy/commit/${commit.sha}`}>{formatDate(commit.authorDate)}</a>
          </small>
        </li>
      ))}
    </ul>
  </section>
  )}
  
</Layout>

<style lang="scss">

section {
  margin: 2rem auto;
  padding: 1rem;
  width: 1000px;
  max-width: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 2rem;
  border: 2px solid var(--box-outline);
  box-shadow: 6px 6px 0 var(--box-outline);
  background: var(--accent-fg);
  border-radius: var(--curve-sm);
  @media(max-width: 768px) {
    max-width: 95%;
    padding: 0.5rem;
    margin: 0 auto;
  }
  p {
    margin-top: 0;
  }
  h2 {
    margin-bottom: 0.5rem;
  }
  ul {
    margin-top: 0;
    padding-left: 1rem;
    list-style: circle;
  }
  .about-data {
    font-size: 1.2rem;
  }

  .commit-log {
    column-width: 350px;
    li {
      small {
        font-size: 0.8rem;
        opacity: 0.7;
        a { text-transform: capitalize;}
      }
      img {
        border-radius: var(--curve-md);
        margin-right: 0.5rem;
      }
    }
  }
}

</style>
