---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<script is:inline src="https://www.google.com/recaptcha/api.js" async defer
></script>

<BaseLayout title="Submit a cat" description="Submit a cat to Cats Of Tech">
  <h1 class="text-center">Submit a cat</h1>
  <p>
    If you work in the tech industry and own a cat that you'd like to share,
    then you've come to the right place! Fill out the form below and <a
      class="text-primary"
      href="https://maciejpedzi.ch">Mac</a
    > should add your feline friend.
  </p>
  <div id="guidelines" class="bg-primary">
    <h3>Guidelines</h3>
    <ul>
      <li>Only cats, please. This is not dogsof.dev or peopleof.tech.</li>
      <li>
        I'm fine with any resolution, orientation, and aspect ratio as along as
        the photo's size doesn't exceed 1 MB.
      </li>
      <li>
        Refrain from adding artsy filters or stickers/overlays. Let your cat be
        the star.
      </li>
      <li>If you own multiple cats, please submit them separately.</li>
      <li>
        If you wish to have your cat's entry updated (e.g. if it passed away), <a
          href="mailto:contact@maciejpedzi.ch">email Mac</a
        > or <a href="https://github.com/maciejpedzich/catsof.tech/issues"
          >open an issue on GitHub</a
        >.
      </li>
    </ul>
  </div>
  <form
    id="submissionForm"
    action="https://usebasin.com/f/7c7567856fa3"
    method="POST"
    enctype="multipart/form-data"
  >
    <div>
      <label for="name">Cat's name</label>
      <input type="text" id="name" name="name" required maxlength="25" />
      <small>Maximum length: 25 characters</small>
    </div>
    <div>
      <label for="photo">Cat's photo</label>
      <input type="file" id="photo" name="photo" required accept="image/*" />
    </div>
    <div>
      <label for="description">Cat's description (optional)</label>
      <textarea id="description" name="description" maxlength="300"></textarea>
      <small>
        Some ideas: nicknames, age, breed(s), where you adopted this cat
      </small>
    </div>
    <div>
      <label for="passedAway">Check this box if your cat has passed away</label>
      <input type="checkbox" id="passedAway" name="passedAway" />
    </div>
    <div>
      <label for="ownerName">Owner's name</label>
      <input type="text" id="ownerName" name="ownerName" required />
    </div>
    <div>
      <label for="ownerLink">Owner's link (optional)</label>
      <input type="url" id="ownerLink" name="ownerLink" />
      <small>Link to your website or a social media account</small>
    </div>
    <input type="hidden" name="_imascriptkiddie" />
    <div
      class="g-recaptcha"
      data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"
    >
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</BaseLayout>

<style>
  h1 {
    margin-bottom: 0;
  }

  h3 {
    margin-bottom: 0.75rem;
  }

  ul {
    margin-top: 0.5rem;
  }

  a {
    text-decoration: underline;
    color: var(--bg-color);
  }

  form {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  input,
  textarea {
    border-color: var(--color-grey);
    background-color: transparent;
    color: var(--font-color);
  }

  button[type='submit'] {
    margin-top: 0.5rem;
    color: var(--bg-color);
  }

  #guidelines {
    padding: 0.05rem 1rem 0.5rem 2rem;
    padding-top: 0.05rem;
    margin-bottom: 1.5rem;
    color: var(--bg-color);
  }
</style>
