{% extends 'base.html' %} {% block content %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{{ form.media }}
<style>


.select2-container {
    width: 100% !important;
    min-width: 0; /* verhindert Überlaufen bei kleinen Screens */
    box-sizing: border-box;
}

/* Das Auswahlfeld */
.select2-selection {
    width: 100% !important;
    box-sizing: border-box;
}

/* Angezeigter Text im Auswahlfeld */
.select2-selection__rendered {
    white-space: nowrap;      
    overflow: hidden;         
    text-overflow: ellipsis;  
}

.select2-selection__choice {
    white-space: normal;      
    word-break: break-word;   
    overflow-wrap: break-word;
    max-width: 100%;         
}






</style>

<input type="hidden" name="pk" value="{{ form.instance.pk }}" />

<div class="container mx-auto px-4 py-4">
  <div
    class="max-w-lg field-group mx-auto bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white"
  >
    <form
      method="post"
      enctype="multipart/form-data"
      class="dark-form space-y-4"
    >
      {% csrf_token %} {{ form.as_p }} {% if form.instance.image %}
      <img
        src="{{ form.instance.image.image.url }}"
        style="max-width: 100px"
        alt="Bild der Frage"
      />
      <label for="reset_image">
        <input type="checkbox" name="reset_image" id="reset_image" />
        Bild zurücksetzen
      </label>
      {% endif %}
      <div>
        <label class="font-bold" for="quiz_image">Bild:</label>
        <input
          class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent"
          type="file"
          name="quiz_image"
          id="quiz_image"
        />
      </div>

      <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
        <label class=""
          >Mit der Erstellung von diesem Quiz stimmen Sie der
          <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a>
          zu.</label
        >
      </div>

      <div class="flex justify-center space-x-3">
        <a
          href="{% if object.quiz_id %}{% url 'library:detail_quiz' object.quiz_id.id %}{% else %}{% url 'library:overview_quiz' %}{% endif %}"
          class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          Abbrechen
        </a>
        <button
          type="submit"
          class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          Speichern
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}