<div class="js-content-error-grade">

  <div class="js-adm-modal-container adm-modal-container-full">
    <div class="adm-modal-header">
      <div class="row no-space-xs between-xs top-xs nowrap-xs">
        <div class="col-xs">
          <span class="text-x-large text-dark text-bold padding-large visible-block">{{ product_name }}</span>
        </div>
        <div class="col-xs-width-auto">
          <i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
        </div>
      </div>
    </div>

      {% if error_grade == false %}
        <div class="adm-modal-content horizontal-padding-large">
          <div class="row no-space-xs stretch-xs js-content-grade-option hidden-overflow">
            <div class="col-xs">
              <div class="content-box margin-medium padding-medium background-gray">
                <p class="text-medium text-dark bottom-margin-large">Ao criar um novo anúncio, o item da grade que estava sincronizado será desvinculado/fechado e um novo anúncio de grade será criado.</p>
                <button type="button" class="btn-default btn-medium btn-primary js-grade-novo">
                  <span>Novo anúncio</span>
                </button>
              </div>
            </div>
            <div class="col-xs">
              <div class="content-box margin-medium padding-medium background-gray">
                <p class="text-medium text-dark bottom-margin-large">O(s) item(s) da grade será transformado em um anúncio com todas as opções da grade no mercadolivre.</p>
                <button type="button" class="btn-default btn-medium btn-primary js-grade-vincular">
                  <span>Vincular</span>
                </button>
              </div>
            </div>
          </div>

          <!-- INICIO da listagem dos anúncios para o botão novo anuncio -->
          <div class="hidden js-content-grade-novo">
            <p class="text-medium text-dark bottom-margin-small">Selecione um anúncio para transformar em um anúncio de grade.</p>
              {% if anuncios %}
                <div class="padding-medium border-gray">
                    {% for anuncio in anuncios %}
                      <label class="field-group vertical-padding-small bottom-border-gray">
                        <div class="flex between-xs middle-xs">
                          <span class="text-dark text-medium">{{ anuncio.marketid }}</span>
                          {% if anuncio.status == constant('Type_MercadoLivreItemStatus::Tp_Closed') %}
                            <span class="js-error-anuncio text-medium text-error">Este anúncio esta finalizado.</span>
                          {% else %}
                            <span class="js-error-anuncio text-medium text-error">Este anúncio será finalizado.</span>
                           {% endif %}
                          <a href="{{ anuncio.url }}" target="_blank" class="link-default text-medium"><span>ver anúncio</span></a>
                        </div>
                      </label>
                    {% endfor  %}
                </div>
              {% endif %}
          </div>
          <!-- FIM da listagem dos anúncios para o botão novo anuncio -->

          <!-- INICIO da listagem dos anúncios para o botão vincular -->
          <div class="hidden js-content-grade-vincular">
            <p class="text-medium text-dark bottom-margin-small">Selecione um anúncio para transformar em um anúncio de grade.</p>
            {% if anuncios %}
              <div class="padding-medium border-gray">
                {% for anuncio in anuncios %}
                  <label class="field-group vertical-padding-small bottom-border-gray">
                    <div class="radio radio-medium">
                      <input type="radio" name="anuncio" class="radio-entry" value="{{ anuncio.product_key_id }}" data-link="{{ anuncio.link }}" {% if anuncio.disabled %} disabled {% endif %} >
                      <span class="radio-text">{{ anuncio.marketid }}</span>
                        {% if anuncio.disabled %}
                          <span class="js-error-anuncio text-medium text-error">Este anúncio será finalizado.</span>
                        {% endif %}
                      <a href="{{ anuncio.url }}" target="_blank" class="link-default text-medium"><span>ver anúncio</span></a>
                    </div>
                  </label>
                {% endfor  %}
              </div>
            {% endif %}
          </div>
          <!-- FIM da listagem dos anúncios para o botão vincular -->

        </div>
        <div class="adm-modal-footer flex end-xs padding-large">

          <!-- INICIO botões de controle do novo anúncio -->
          <div class="js-content-grade-novo hidden flex">
            <button type="button" class="btn-default btn-medium btn-outline right-margin-small js-grade-cancel-novo">
              <span>Cancelar</span>
            </button>
            <button type="button" class="btn-default btn-medium btn-primary js-grade-novo-apply" data-link="{{ link }}">
              <span>Aplicar</span>
            </button>
          </div>
          <!-- FIM botões de controle do novo anúncio -->

          <!-- INICIO botões de controle do vincular anúncio -->
          <div class="js-content-grade-vincular hidden flex">
            <button type="button" class="btn-default btn-medium btn-outline right-margin-small js-grade-cancel-vincular">
              <span>Cancelar</span>
            </button>
            <button type="button" class="btn-default btn-medium btn-primary js-grade-vincular-apply" disabled>
              <span>Aplicar</span>
            </button>
          </div>
          <!-- FIM botões de controle do vincular anúncio -->

        </div>
    {% else %}
      <div class="adm-modal-content horizontal-padding-large">
        <span class="text-large text-dark">{{ error_grade }}</span>
      </div>
      <div class="adm-modal-footer flex end-xs padding-large">
        <button type="button" class="btn-default btn-medium btn-outline right-margin-small js-adm-modal-close">
          <span>Cancelar</span>
        </button>
      </div>
    {% endif %}
  </div>
</div>
