---
import { getVersionedDocsPath } from '@libs/path'
import { getConfig } from '@libs/config'
import { getData } from '@libs/data'
import { getSlug } from '@libs/utils'
---

{
  getData('examples').map(({ category, description, examples, external }) => {
    return (
      <div class="bd-content">
        <h2 id={getSlug(category)}>{category}</h2>
        <p>{description}</p>
        {category === 'RTL' && (
          <div class="bd-callout bd-callout-warning small">
            <p>
              <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an
              improvement to suggest?
            </p>
            <p>
              <a href={`${getConfig().repo}/issues/new/choose`}>Please open an issue.</a>
            </p>
          </div>
        )}
        <div class="row">
          {examples.map((example, index) => {
            if (external) {
              return (
                <article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
                  <svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true">
                    <use xlink:href="#box-seam" />
                  </svg>
                  <div>
                    <h3 class="h5 mb-1">
                      <a
                        class="d-block link-offset-1"
                        href={`${getConfig().github_org}${example.url}/`}
                        target="_blank"
                        rel="noopener"
                        id={`starter-${index}`}
                      >
                        {example.name}
                      </a>
                    </h3>
                    <p class="text-body-secondary">{example.description}</p>
                    <p>
                      <a
                        class="icon-link small link-secondary link-offset-1"
                        href={`https://stackblitz.com/github/twbs${example.url}?file=${
                          example.indexPath ? example.indexPath : 'index.html'
                        }`}
                        target="_blank"
                        rel="noopener"
                        aria-labelledby={`edit-${index} starter-${index}`}
                      >
                        <svg class="bi flex-shrink-0" aria-hidden="true">
                          <use xlink:href="#lightning-charge-fill" />
                        </svg>
                        <span id={`edit-${index}`}>Edit in StackBlitz</span>
                      </a>
                    </p>
                  </div>
                </article>
              )
            }

            return (
              <article class="col-sm-6 col-md-3 mb-3">
                <a
                  class="d-block link-offset-1"
                  href={`/docs/${getConfig().docs_version}/examples/${getSlug(example.name)}/`}
                  hreflang={example.name.includes('RTL') ? 'ar' : undefined}
                >
                  <img
                    class="img-thumbnail mb-3"
                    srcset={`${getVersionedDocsPath(
                      `/assets/img/examples/${getSlug(example.name)}.png`
                    )}, ${getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}@2x.png`)} 2x`}
                    src={getVersionedDocsPath(`/assets/img/examples/${getSlug(example.name)}.png`)}
                    alt=""
                    width="480"
                    height="300"
                    loading="lazy"
                  />
                  <h3 class="h5 mb-1">{example.name}</h3>
                </a>
                <p class="text-body-secondary">{example.description}</p>
              </article>
            )
          })}
        </div>
      </div>
    )
  })
}