---
import { CopyButton } from './buttons/CopyButton'
import { LinkButton } from './buttons/LinkButton'
import { OpenPageDropdown } from './OpenPageDropdown/OpenPageDropdown'
import { PAGE_TITLE_ID } from './TableOfContent/constants'

const { origin, pathname } = Astro.url
const normalizedPath = pathname.replace(/\/$/, '')
const defaultMarkdownUrl = `${origin}${normalizedPath || '/docs/en'}.md`
const route = Astro.locals.starlightRoute
const entry = Astro.props.entry ?? route?.entry
const pageLocale = Astro.props.locale ?? route?.lang ?? 'en'
const llmUrl = entry?.data?.llmUrl
const toolboxLlmUrl = entry?.data?.toolboxLlmUrl
const markdownUrl = llmUrl || defaultMarkdownUrl
const markdownRaw = llmUrl ? null : (entry?.body ?? null)
---

{
  entry && !entry.data.hideTitleOnPage && (
    <h1 id={PAGE_TITLE_ID}>{entry.data.title}</h1>
  )
}
<div class="title-actions">
  {
    markdownRaw && (
      <CopyButton client:load value={markdownRaw} variant="ghost">
        {Astro.locals.t('header.copyForLlms' as any)}
      </CopyButton>
    )
  }
  <LinkButton client:load href={markdownUrl} target="_blank" variant="ghost">
    {
      !llmUrl && (
        <svg stroke-linejoin="round" viewBox="0 0 22 16" height="16" width="16">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
            fill="currentColor"
          />
        </svg>
      )
    }
    {
      llmUrl
        ? Astro.locals.t('header.viewOpenApiSpec' as any) ||
          'OpenAPI Specification'
        : Astro.locals.t('header.viewAsMarkdown' as any)
    }
  </LinkButton>
  {
    toolboxLlmUrl && (
      <LinkButton
        client:load
        href={toolboxLlmUrl}
        target="_blank"
        variant="ghost"
      >
        {Astro.locals.t('header.viewToolboxOpenApiSpec' as any) ||
          'Toolbox OpenAPI Specification'}
      </LinkButton>
    )
  }
  <OpenPageDropdown
    client:load
    locale={pageLocale}
    url={markdownUrl}
    className="right"
  />

  {
    entry && (entry.data.licence || entry.data.distribution) && (
      <dl class="tiers-distribution-list">
        <div>
          <>
            <dt>Licence:</dt>
            <dd>{entry.data.licence}</dd>
          </>
        </div>
        <div>
          <>
            <dt>Distribution:</dt>
            <dd>{entry.data.distribution}</dd>
          </>
        </div>
      </dl>
    )
  }

  <style>
    .tiers-distribution-list {
      margin: 0;
      border-left: 1px solid var(--hover-color);
      padding-left: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      > div {
        display: inline-flex;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.4;
        letter-spacing: -0.02em;
        > dt {
          color: var(--secondary-text-color);
        }
        > dd {
          color: var(--primary-text-color);
          margin-left: 1ch;
        }
      }
    }
    h1 {
      margin-bottom: unset !important;
    }

    .title-actions {
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.8125rem;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .title-actions:first-child {
      margin-top: 40px;
    }

    .right {
      margin-left: auto;
    }

    @media (max-width: 650px) {
      .desktop-only {
        display: none;
      }
    }
  </style>
</div>
