{% load i18n %}

{% if link %}
<a href="#" aria-label="{% translate 'Copy' %}" title="{% translate 'Copy' %}" class="js-copy-btn inline-flex items-center text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">
    <span class="js-copy-label sr-only" aria-live="polite">{% translate "Copy" %}</span>
    <svg class="js-copy-svg w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M7 2a2 2 0 0 0-2 2v2h2V4h8v8h-2v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Z" />
        <path d="M3 8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Zm2 0v8h6V8H5Z" />
    </svg>
    <svg class="js-copied-svg hidden w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" />
    </svg>
</a>
{% else %}
<button type="button" class="js-copy-btn inline-flex items-center gap-2 font-bold border-2 active:ring-3 rounded-md px-3 py-2 {% if secondary %}text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 hover:bg-slate-200 dark:hover:bg-slate-800{% else %}text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600{% endif %}">
    <svg class="js-copy-svg w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M7 2a2 2 0 0 0-2 2v2h2V4h8v8h-2v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Z" />
        <path d="M3 8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Zm2 0v8h6V8H5Z" />
    </svg>
    <svg class="js-copied-svg hidden w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" />
    </svg>
    <span class="js-copy-label">{% translate "Copy" %}</span>
</button>
{% endif %}