{% extends "base.html" %}

{% load i18n icons static translations %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs object %}
  <li class="breadcrumb-item">
    <a href="{% url "widgets" path=object.get_url_path %}">{% translate "Widgets" %}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}

  <h2>{% translate "Promoting translation projects" %}</h2>

  <p>
    {% blocktranslate %}You can point newcomers to the introduction page at {{ engage_link }}.{% endblocktranslate %}
  </p>

  <h3>{% translate "Promoting specific translations" %}</h3>

  <form class="autosubmit">
    {% translate "Besides promoting the whole translation project, you can also choose a specific language or component to promote:" %}
  </form>

  <h3>{% translate "Image widgets" %}</h3>

  <p>
    {% translate "You can use the following widgets to promote translation of your project. They can increase the visibility of your translation projects and bring in new contributors." %}
  </p>

  <div id="widgets-data" data-json='{{ widgets_json }}' style="display: none;"></div>
  <div class="row mt-4">
    <div class="col-md-4">
      <div class="widget-card p-3">
        <h4>Widget Settings</h4>
        <label for="widget-type" class="form-label mt-2">{% translate "Widget" %}</label>
        <select id="widget-type" class="select-tab form-control">
          {% for widget in widget_list %}
            <option value="{{ widget.name }}">{% translate widget.verbose %}</option>
          {% endfor %}
        </select>
        <label for="translation-language" class="form-label mt-2">{% translate "Language" %}</label>
        <select id="translation-language" class="select-tab form-control">
          {% for language in form.lang.field.choices %}
            <option value="{{ language.0 }}">{% translate language.1 %}</option>
          {% endfor %}
        </select>
        <label for="component" class="form-label mt-2">{% translate "Component" %}</label>
        <select id="component" class="select-tab form-control">
          {% for component in form.component.field.choices %}
            <option value="{{ component.0 }}">{% translate component.1 %}</option>
          {% endfor %}
        </select>
        <label for="code-language" class="form-label mt-2">{% translate "Code" %}</label>
        <select id="code-language" class="select-tab form-control">
          <option value="html">{% translate "HTML" %}</option>
          <option value="bb-code">{% translate "BBCode" %}</option>
          <option value="mdk">{% translate "Markdown" %}</option>
          <option value="rst">{% translate "reStructuredText" %}</option>
          <option value="textile-code">{% translate "Textile code" %}</option>
          <option value="url">{% translate "Image URL" %}</option>
        </select>
        <label for="color-select" class="form-label mt-2">{% translate "Color" %}</label>
        <select id="color-select" class="form-control">
          <!-- Options will be populated dynamically -->
        </select>
        <div id="extra-parameters"></div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="widget-card p-3">
        <h4>{% translate "Live Preview" %}</h4>
        <div class="preview-box" id="preview">
          <img id="widget-image" src="data:," alt="" style="max-width: 500px" />
        </div>
      </div>

      <div class="widget-card p-3">
        <button id="embed-code-copy-button"
                type="button"
                class="btn btn-link btn-xs float-end"
                data-clipboard-value=""
                data-clipboard-message="{% translate "Embed code copied to clipboard." %}"
                title="{% translate "Copy to clipboard" %}">{% icon "copy.svg" %}</button>
        <p id="embed-code-label" class="fw-bold fs-4">{% translate "Embed Code" %}</p>
        <textarea id="embed-code" aria-labelledby="embed-code-label" class="code-example form-control" rows="3" readonly>
        </textarea>
      </div>
    </div>
  </div>

{% endblock content %}

{% block extra_script %}
  <script defer src="{% static "js/widgets.js" %}"></script>
{% endblock extra_script %}