{% load i18n %}

<div class="my-4 not-prose">
  <div
    class="card card-sm lg:card-md 2xl:card-lg border border-base-300 bg-base-200"
  >
    <div class="flex items-center justify-between gap-4 p-2">
      {% if self.show_window_btns %}
      <div class="flex items-center gap-2">
        <div class="size-5 rounded-full bg-green-500"></div>
        <div class="size-5 rounded-full bg-yellow-500"></div>
        <div class="size-5 rounded-full bg-red-500"></div>
      </div>
      {% endif %}

      <div
        class="tooltip tooltip-bottom tooltip-primary"
        data-tip="{% trans 'File name' %}"
      >
        <span
          class="badge font-mono font-semibold badge-soft badge-sm badge-primary lg:badge-md"
        >
          <span class="sr-only">{% trans 'File name: ' %}</span>
          <span>{{ self.file_name }}</span>
        </span>
      </div>

      <div class="flex items-center justify-between gap-4">
        {% if self.show_language %}
        <div
          class="tooltip tooltip-left rtl:tooltip-right"
          data-tip="{% trans 'Programming language' %}"
        >
          <span class="btn btn-xs btn-copy btn-ghost lg:btn-sm">
            <i data-lucide="terminal" class="size-4 lg:size-5"></i>
            <span class="sr-only">{% trans 'Programming language' %}:</span>
            {{ self.language|title }}
          </span>
        </div>
        {% endif %}

        <!---->
        {% if self.show_copy_btn %}
        <div
          class="tooltip tooltip-left rtl:tooltip-right"
          data-tip="{% trans 'Copy' %}"
        >
          <button
            class="btn btn-xs btn-copy btn-ghost btn-square lg:btn-sm"
            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>
        {% endif %}
      </div>
    </div>

    <pre
      class="overflow-x-auto max-w-full rounded-box overflow-clip"
    ><code class="bg-transparent language-{{ self.language }}">{{ self.code }}</code></pre>
  </div>
</div>