{% load static compress i18n %}

{% compress css file font_admin_css %}
    <style>
        {% for font in fonts %}
            @font-face {
                font-family: '{{font.family}}';
                font-style: normal;
                font-weight: 400;
                src: url({{font.files.regular}}) format('woff2');
            }
            li[id$="{{font.family}}"], span[title="{{font.family}}"] {
                font-family: "{{font.family}}", sans-serif !important;
                font-weight: 400 !important;
                font-style: normal !important;
            }
        {% endfor %}
    </style>
{% endcompress %}

{% if widget.value %}
    <link href="https://fonts.googleapis.com/css2?family={{widget.value}}:wght@300;400;900&display=swap" rel="stylesheet">
{% endif %}

<select {{widget.required|yesno:"required,"}} class="form-select" id="{{widget.attrs.id}}" name="{{widget.name}}">
    <option value="">{% trans "Choose a font..." %}</option>
    {% for font in fonts %}
        <option {% if widget.value == font.family %}selected{% endif %} data-url="{{font.files.regular}}" value="{{font.family}}">{{font.family}}</option>
    {% endfor %}
</select>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        registerFont('{{widget.attrs.id}}')
    })
</script>