---
import {getCollection} from "astro:content";

const projects = await getCollection('projects');
projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
---
<section id="projects">
  <div class="showcase">
    {
      projects.map((project, index) => {
        return (
            <button class="project" popovertarget={`project-${[index]}`} popovertargetaction="show" aria-label={`Project details: ${project.data.name}`}>
              <span class="icon">
                <img
                    src={project.data.image}
                    alt=""
                    aria-hidden="true"
                    loading={index > 4 ? "lazy" : "eager"}
                    decoding="async"
                    draggable="false"
                />
              </span>
              <span class="description">
                <span>{project.data.name}</span>
              </span>
            </button>
            <div popover id={`project-${[index]}`} class="window popup" aria-label={`Details about ${project.data.name}`} data-title={project.data.name}>
              <div class="buttons">
                <button popovertarget={`project-${[index]}`} popovertargetaction="hide" aria-label="Close project details">
                  <span class="icon">❌</span>
                </button>
              </div>
              <span class="icon">
                <img
                    src={project.data.image}
                    alt=""
                    aria-hidden="true"
                    loading={index > 4 ? "lazy" : "eager"}
                    decoding="async"
                    draggable="false"
                />
              </span>
              <span>{project.data.description}</span>
              <span class="links">
                {
                  project.data.links.map((link) => {
                    return (
                        <span>
                          <a href={link.url} target="_blank">{link.text}</a>
                      </span>
                    )
                  })
                }
              </span>
            </div>
        )
      })
    }
  </div>

</section>

<style lang="scss" scoped>
  section {
    text-align: center;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
  }

  .popup {
    position: fixed;
    padding-top: 2.5rem;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: min(40rem, 100%);
    &:popover-open {
      display: flex;
    }
  }

  .showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10rem);
    max-width: 100%;
    gap: 0.75rem;
    padding-block: 1.5rem;
    justify-content: center;
    padding-inline: 0.5rem;
    grid-row-gap: 1.5rem;

    h3 {
      font-size: 1rem;
      font-weight: 300;
    }
  }

  .project {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    border-radius: 0.25rem;
    width: 100%;
    scroll-snap-align: start;
    color: #cccccc;
    font-size: 1rem;
    font-family: var(--font-family-serif),serif;
    gap: 0.25rem;
    padding: 0.25rem;
    height: min-content;
    &:focus-within {
      background-color: #548e9b;
    }
    &:focus-visible {
      outline: none;
    }
    &:hover {
      .icon {
        color: var(--text-main);
        img {
          transform: translateY(-0.1rem);
        }
      }
    }
  }

  .icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.25rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 0.25rem;
      transition: transform 0.2s ease;
    }
  }

  .description {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    flex: 1 1;
  }

  .links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1;

    a {
      white-space: nowrap;
    }
  }

  @media screen and (max-width: 800px) {
    .showcase {
      padding-inline: 0;
    }
    .project {
      scroll-margin-inline: 0;
      scroll-snap-align: center;
    }
  }
</style>
