{% load i18n static %}
<div>
  <form method="post" id="csam-login">

    <div style="
      display:flex;
      align-items:center;
      gap:1rem;
      background:#fff3cd;
      border:2px solid #ffecb5;
      color:#664d03;
      padding:1rem 1.25rem;
      border-radius:8px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.02em;
      margin-bottom:1.5rem;
      display: inline-flex;
    ">
      <img src="{{ portal_url }}/static/includes/svg/alert-triangle.svg"
           alt="Attention"
           style="width:48px; height:48px; flex:0 0 auto;" />
      <span style="font-size:1.4rem; line-height:1.2;">
        OBLIGATOIRE POUR LE PORTAIL PARENT
      </span>
    </div>

    <div style="
      display:flex;
      justify-content:flex-start;
      align-items:center;
      gap:1.25rem;
      flex-wrap:wrap;
      margin-bottom:1.25rem;
    ">
      {% if itsme %}
        <img
          src="{{ portal_url }}/static/imio/images/beid-itsme.png"
          alt="Connexion eID ou itsme"
          style="
            cursor:pointer;
            width:320px;
            max-width:100%;
            height:auto;
            display:block;
          "
        />
      {% else %}
        <img
          src="{% static 'authentic2_auth_fedict/img/beid_image_mini.png' %}"
          alt="Connexion eID"
          style="
            cursor:pointer;
            width:220px;
            max-width:100%;
            height:auto;
            display:block;
          "
        />
      {% endif %}
    </div>

    <input type="submit" name="{{ submit_name }}" value="Connexion"
           style="
             padding:.6rem 1rem;
             font-weight:600;
             border-radius:6px;
             cursor:pointer;
           " />
  </form>

  <script>
    $(function() {
      $('#csam-login img').on('click', function() {
        $('#csam-login input[type="submit"]').click();
      });
    });
  </script>
</div>