{% load sentry_helpers %}
{% load sentry_assets %}

{% block css %}
{% if show_login_banner %}
<style type="text/css">
  .alert-banner {
    background: rgb(255, 219, 74);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 4px;
  }
  .alert-message {
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    flex-grow: 1;
    font-size: 16px;
    font-family: Rubik;
  }
  @media only screen and (max-width: 1025px) {
    .alert-banner {
      display: none;
    }
  }
</style>
{% endif %}
{% endblock %}

<div id="blk_alerts" class="messages-container"></div>
<div id="blk_indicators"></div>

{% script %}
<script>
  window.__onSentryInit = window.__onSentryInit || [];
  window.__onSentryInit.push({
    name: 'renderReact',
    component: 'SystemAlerts',
    container: '#blk_alerts',
    props: {
      className: 'alert-list',
    },
  });
  window.__onSentryInit.push({
    name: 'renderReact ',
    component: 'Indicators',
    container: '#blk_indicators',
    props: {
      className: 'indicators-container',
    },
  });
</script>
{% endscript %}


{% if messages %}
  <div id="messages" class="messages-container">
    {% for message in messages %}
        {% with message.tags|split:" " as message_tags %}
          <div class="alert{% if message.tags %}{% for tag in message_tags %} alert-{{ tag }}{% endfor %}{% endif %}">
            <div class="container">
              <a class="close" data-dismiss="alert">×</a>
              <span class="icon"></span>
              {{ message|linebreaks }}
            </div>
          </div>
      {% endwith %}
    {% endfor %}
  </div>
{% elif show_login_banner %}
  <div class="alert-banner">
    <div class="alert-message">
      {% if banner_choice == 0 %}
      Scaling your frontend project? Join us July 12th to learn best practices for scaling your frontend project from the engineering team at Unity. &nbsp<a target="_blank" href="https://sentry.io/resources/best-practices-from-unity/?utm_medium=banner&utm_source=sentry-app&utm_campaign=login-frontend-scaling-webinar&utm_content=login-banner&utm_term=">Learn more</a>.
      {% elif banner_choice == 1 %}
      Backend Error Monitoring 101 livestream: Join us on July 11th at 10am PT as we cover backend project set up basics and best practices. &nbsp<a target="_blank" href="https://sentry.io/resources/backend-error-monitoring-101/?utm_medium=banner&utm_source=sentry-app&utm_campaign=login-backend-webinar-101&utm_content=login-banner&utm_term=">Learn more</a>.
      {% endif %}
    </div>
  </div>
{% endif %}
