{% extends "survey/base.html" %}
{% load i18n pluralize_ru %}

{% block title %}{{ survey.name }}{% endblock %}

{% block page_actions %}

<form method="post">
    {% csrf_token %}
    {{ form.start_survey }}
    <button type="submit"
    class="btn btn-primary mt-2 w-25">
        {% trans "Start the Quiz" %}
        <i class="ti ti-arrow-narrow-right icon icon-tabler ms-1"></i>
    </button>
</form>

{% endblock page_actions %}

{% block body %}




<div class="row g-4 mt-2">
    <!-- Левая колонка -->
    <div class="col-lg-8 col-12">


      <div class="card markdown h-100">
        <div class="card-body">


          <div class="lh-lg">{{ object.description|safe }}</div>

        </div>
      </div>
    </div>




    <!-- Правая колонка -->
    <div class="col-lg-4 col-12">
      <div class="card card-backgroundless border-1 h-100">
        <div class="ribbon bg-secondary text-secondary-fg">Историческая справка</div>
        <div class="card-title">&nbsp;</div>
        <div class="card-body">
          <div class="lh-lg">{{ object.history_description|safe|default:"Составили эту тренировку по реальному сбою, который произошел в компании, которую не можем назвать. Как только получим разрешение, обязательно подробно расскажем о сбое." }}</div>
        </div>
      </div>
    </div>



  </div>







<!-- Quiz Info Box -->
<div class="rounded-3 p-4 mb-4">
    <div class="row text-center">
        <div class="col-4">
            <div class="mb-2">
                <i class="fas fa-question-circle text-primary fs-4"></i>
            </div>
            <div class="small text-muted">{% trans "Вопросов" %}</div>
            <div class="fw-bold ">{{ survey.total_questions }}</div>
        </div>
        <div class="col-4">
            <div class="mb-2">
                <i class="fas fa-clock text-success fs-4"></i>
            </div>
            <div class="small text-muted">{% trans "Время" %}</div>
            <div class="fw-bold ">{% trans "Без лимита" %}</div>
        </div>
        <div class="col-4">
            <div class="mb-2">
                <i class="fas fa-star text-warning fs-4"></i>
            </div>
            <div class="small text-muted">{% trans "Категория" %}</div>
            <div class="fw-bold ">{{ survey.total_questions }}</div>
        </div>
    </div>
</div>





{% endblock body %}