{% extends 'new_base.html' %}
{% set AWAL_BRAND = 'awal' %}
{% block header_title %}
  <div class="main_message rejection" style="display: flex;padding-left: 15px;align-items: center;font-size: 24px;line-height: 30px;{% if default_brand == AWAL_BRAND %}font-family: Barlow, sans-serif;{% endif %}">
      <p>
          {% trans %}We’ve encountered one or more issues with{% endtrans %}
          <span class="title_artist" style="{% if default_brand == AWAL_BRAND %}color: #A9A9B2;{% else %}color: #847C7C;{% endif %}">
          {{product_name}}
          </span> by <span class="title_artist" style="{% if default_brand == AWAL_BRAND %}color: #A9A9B2;{% else %}color: #847C7C;{% endif %}">
          {{artist_name}}
          </span>
      </p>
  </div>
{% endblock %}

{% block content %}
    <div class="main_content" style="width: 100%;">
        <br>
        <div style="margin-bottom: 15px;">
            {% trans %}In order to resolve these issues{% endtrans %}:
            <ul style="margin:0;padding-left: 20px;">
                <li>{% trans %}visit the product page{% endtrans %}</li>
                <li>{% trans %}make the appropriate changes{% endtrans %}</li>
                <li>{% trans %}submit your product just as you did before{% endtrans %}</li>
            </ul>
        </div>
        <br>
        <div style="text-align: center;margin-top: 35px;margin-bottom: 35px;" class="button_wrapper">
            <a class="go_to_product" href="{{ product_url }}" style="padding: 15px 26px;text-transform: uppercase;border: none;font-size: 12px;font-weight: 700;color: #FFF;text-decoration:none;{% if default_brand == AWAL_BRAND %}background: linear-gradient(90deg, rgba(211,84,218,1) 0%, rgba(118,4,225,1) 100%);font-family: Space Mono, monospace;{% else %}background: #FF893E;font-family: Helvetica, sans-serif;{% endif %}">
                {% trans %}GO TO PRODUCT PAGE{% endtrans %}
            </a>
        </div>
        <br>
    </div>
{% endblock %}

{% block issues %}
    <div class="issues" style="width: 100%;margin-bottom: 30px;{% if default_brand == AWAL_BRAND %}background: #303040;font-family: Karla, sans-serif;{% else %}font-family: Helvetica, sans-serif;background: #F3F0F0;{% endif %}">
        <div class="issues_content" style="max-width: 450px;width: 100%;padding: 23px 25px;margin: auto;">
            <div style="font-size: 16px; font-weight: 400; margin-bottom: 2px; line-height: 25px;">
                {{artist_name}}
            </div>
            <div style="margin-bottom: 15px;">
                <span style="font-weight: 700; font-size: 28px;" class="issue_artist_name">{{product_name}}</span>
                <br>
                <span style="font-weight: 400; font-size: 10px; display: inline-block; width: 35px;">{{upc}}</span>
            </div>
            <div class="issues_reasons_wrap" style="font-family: Rubik, sans-serif;padding: 5px;border-radius: 3px;background: #FFFFFF;{% if default_brand == AWAL_BRAND %}color: #1C1C1C;font-size: 14px;{% endif %}">
                <ul class="issues_reasons rejection" style="border-left: 6px solid red;border-radius: 2px;margin: auto;padding: 20px;list-style-type: none;">
                    {% for item in rejection_reasons %}
                    <li style="display: flex;align-items: center;">
                        <svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top: 2px;">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.95633 16.4699L11.1521 3.35672C11.5438 2.73005 12.4564 2.73005 12.8481 3.35672L21.0438 16.4699C21.4601 17.136 20.9813 17.9999 20.1958 17.9999H3.80433C3.0189 17.9999 2.54005 17.136 2.95633 16.4699ZM10.5001 6.99992H13.5001V12.9999H10.5001V6.99992ZM12.0001 16.9999C12.8285 16.9999 13.5001 16.3284 13.5001 15.4999C13.5001 14.6715 12.8285 13.9999 12.0001 13.9999C11.1717 13.9999 10.5001 14.6715 10.5001 15.4999C10.5001 16.3284 11.1717 16.9999 12.0001 16.9999Z" fill="#E84031"></path>
                        </svg>
                        <span style="margin-left: 10px;">
                            <span>{{item.title}}</span>.
                            <span>{{item.comments}}</span>
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% if default_brand == ORCHARD_BRAND %}
        <p style="margin-bottom: 30px; font-size: 14px; margin: auto; max-width: 450px; width: 100%; padding: 0 25px;">
            If you have any questions or need assistance, get in touch: <a href="mailto:{{assigned_to_email}}">{{assigned_to_email}}</a>
        </p>
    {% endif %}
{% endblock %}