---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import InlinePlayer from '@ui/InlinePlayer.astro'
import players from '@data/inline-players.json'
import DocsLink from '@ui/DocsLink.astro'

type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number }
---

<DefaultLayout title="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
  <DocsLink slot="page-header-actions" path="/ui/plugins/inline-player" />
  <div class="row row-cards">
    {
      (players as Provider[]).map((provider) => (
        <div class="col-lg-6">
          <Card>
            <CardBody>
              <CardTitle>{provider.title}</CardTitle>

              <InlinePlayer id={provider.id} type={provider.type} embedId={provider['embed-id']} />
            </CardBody>
          </Card>
        </div>
      ))
    }
  </div>
</DefaultLayout>