{% load i18n %}

<div class="relative my-4">
  <div
    class="card card-sm card-border border-base-300 md:card-md lg:card-lg xl:card-xl"
  >
    <div class="absolute inset-x-0 top-0">
      <div class="flex items-center justify-end gap-4 p-1">
        <div class="tooltip" data-tip="{% trans 'Language' %}">
          <span class="btn btn-sm btn-ghost lg:btn-md">
            <span class="sr-only">{% trans 'Programming language' %}:</span>
            {{ self.language|title }}
          </span>
        </div>

        <div class="tooltip" data-tip="{% trans 'Copy' %}">
          <button
            class="btn btn-sm btn-copy btn-ghost btn-square lg:btn-md"
            data-clipboard-text="{{ self.code }}"
          >
            <span class="sr-only">{% trans 'Copy' %}</span>
            <i data-lucide="copy" class="size-4 lg:size-5"></i>
          </button>
        </div>
      </div>
    </div>

    <pre
      class="overflow-hidden rounded-box"
    ><code class="language-{{ self.language }}">{{ self.code }}</code></pre>
  </div>
</div>