{% load i18n %}

<div>
  <div class="colours-selection">
    <fieldset class="colour-selection">
      <legend>{% trans "Text" %}</legend>
      <label for="id_{{ widget.name }}_text_mode" class="sr-only">{% trans "Mode" %}</label>
      <select id="id_{{ widget.name }}_text_mode" name="{{ widget.name }}_text_mode" class="colour-selection-text-mode">
        <option value="">{% trans "Default colour" %}</option>
        <option value="__custom__" {% if text_color %}selected{% endif %}>{% trans "Custom colour:" %}</option>
      </select>
      <label for="id_{{ widget.name }}_text_color" class="sr-only">{% trans "Color" %}</label>
      <input type="color" name="{{ widget.name }}_text_color" id="id_{{ widget.name }}_text_color" value="{{ text_color|default:"#000000" }}"
             {% if not text_color %}style="visibility: hidden"{% endif %}>
    </fieldset>

    <fieldset class="colour-selection">
      <legend>{% trans "Background" %}</legend>
      <label for="id_{{ widget.name }}_background_mode" class="sr-only">{% trans "Mode" %}</label>
      <select id="id_{{ widget.name }}_background_mode" name="{{ widget.name }}_background_mode" class="colour-selection-background-mode">
        <option value="">{% trans "Default colour" %}</option>
        <option value="__custom__" {% if background_color %}selected{% endif %}>{% trans "Custom colour:" %}</option>
      </select>
      <label for="id_{{ widget.name }}_background_color" class="sr-only">{% trans "Color" %}</label>
      <input type="color" name="{{ widget.name }}_background_color" id="id_{{ widget.name }}_background_color"
             value="{{ background_color|default:"#FFFFFF" }}"
             {% if not background_color %}style="visibility: hidden"{% endif %}>
    </fieldset>

  </div>

  <p class="contrast-check" {% if not text_color and not background_color %}style="display: none"{% endif %}>
    {% trans "Contrast check:" %}
    <span class="contrast-info">
      <span class="contrast-info--foreground" data-selector="[name='{{ widget.name }}_text_color']"></span>
      <span class="contrast-info--background" data-selector="[name='{{ widget.name }}_background_color']"></span>
      <span class="contrast-info--value"></span>
      <span class="contrast-info--mark"></span>
    </span>
  </p>

</div>