{% if section.settings.enable %}
  <style>
    {% assign items = section.blocks | reverse %}

    {% for block in items %}
      {% assign name = block.settings.name %}
      {% assign customFontStyle = block.settings.custom_font_style %}
      {% assign apply_h1 = block.settings.apply_h1 %}
      {% assign apply_h2 = block.settings.apply_h2 %}
      {% assign apply_h3 = block.settings.apply_h3 %}
      {% assign apply_h4 = block.settings.apply_h4 %}
      {% assign apply_h5 = block.settings.apply_h5 %}
      {% assign apply_h6 = block.settings.apply_h6 %}
      {% assign apply_span = block.settings.apply_span %}
      {% assign apply_p = block.settings.apply_p %}
      {% assign apply_custom = block.settings.apply_custom %}
      {% assign apply_a = block.settings.apply_a %}
      {% assign apply_input = block.settings.apply_input %}
      {% assign apply_label = block.settings.apply_label %}
      {% assign apply_legend = block.settings.apply_legend %}
      {% assign apply_button = block.settings.apply_button %}
      {% assign apply_summary = block.settings.apply_summary %}
      {% assign apply_select = block.settings.apply_select %}
      {% assign apply_option = block.settings.apply_option %}
      {% assign apply_small = block.settings.apply_small %}
      {% assign font_weights = "normal,thin,light,bold,ultrabold" | split: "," %}

      {% for weight in font_weights %}
        {% assign url_key = "custom_font_url_" | append: weight %}
        {% assign url = block.settings[url_key] %}
        {% if url != blank %}
          @font-face {
            font-family: '{{ name }}';
            src: url({{ url }}) format('woff2');
            font-weight: {% if weight == 'normal' %}normal{% elsif weight == 'thin' %}100{% elsif weight == 'light' %}300{% elsif weight == 'bold' %}bold{% elsif weight == 'ultrabold' %}900{% endif %};
            {% if customFontStyle != 'none' %}
              font-style: {{ customFontStyle }};
            {% endif %}
          }
        {% endif %}
      {% endfor %}

      body {
        font-family: '{{ name }}';
        font-weight: normal;
      }

      {% if apply_h1 %}
        h1 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_h2 %}
        h2 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_h3 %}
        h3 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_h4 %}
        h4 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_h5 %}
        h5 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_h6 %}
        h6 {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_p %}
        p {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_a %}
        a {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_input %}
        input {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_label %}
        label {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_legend %}
        legend {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_button %}
        button {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_summary %}
        summary {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_select %}
        select {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_option %}
        option {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_small %}
        small {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_span %}
        span {
          font-family: '{{ name }}';
        }
      {% endif %}
      {% if apply_custom != "" and apply_custom != blank %}
        {{ apply_custom }} {
          font-family: '{{ name }}';
        }
      {% endif %}
    {% endfor %}
  </style>
{% endif %}

{% schema %}
{
  "name": "Custom Font",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable",
      "label": "Activar",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "font",
      "name": "Fuente",
      "settings": [
        {
          "type": "text",
          "id": "name",
          "label": "Nombre de la Fuente",
          "default": "customfont"
        },
        {
          "type": "url",
          "id": "custom_font_url_thin",
          "label": "URL de la fuente Thin (100)"
        },
        {
          "type": "url",
          "id": "custom_font_url_light",
          "label": "URL de la fuente Light (300)"
        },
        {
          "type": "url",
          "id": "custom_font_url_normal",
          "label": "URL de la fuente Normal (400)"
        },
        {
          "type": "url",
          "id": "custom_font_url_bold",
          "label": "URL de la fuente Bold (700)"
        },
        {
          "type": "url",
          "id": "custom_font_url_ultrabold",
          "label": "URL de la fuente UltraBold (900)"
        },
        {
          "type": "text",
          "id": "custom_font_style",
          "label": "Estilo de la Fuente",
          "default": "normal"
        },
        {
          "type": "paragraph",
          "content": "Aplica para elementos HTML"
        },
        {
          "type": "checkbox",
          "id": "apply_h1",
          "label": "H1",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h2",
          "label": "H2",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h3",
          "label": "H3",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h4",
          "label": "H4",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h5",
          "label": "H5",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_h6",
          "label": "H6",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_span",
          "label": "<span>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_p",
          "label": "<p>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_a",
          "label": "<a>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_input",
          "label": "<input>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_label",
          "label": "<label>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_legend",
          "label": "<legend>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_button",
          "label": "<button>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_summary",
          "label": "<summary>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_select",
          "label": "<select>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_option",
          "label": "<option>",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "apply_small",
          "label": "<small>",
          "default": true
        },
        {
          "type": "text",
          "id": "apply_custom",
          "label": "Elemento(s) Personalizado(s)",
          "default": ".ttf"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Fuente Personalizada"
    }
  ]
}
{% endschema %}