{% extends "otree/Page.html" %}
{% load i18n %}
{% load otree static %}

{% block global_styles %}
{% endblock %}

{% block global_scripts %}
{% endblock %}

{% block body_main %}
{% block progress %}

{% if instructions %}

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Hướng dẫn</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% include view.instructions_path %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">đóng</button>

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

{% endif %}

<nav class="navbar navbar-light bg-light  d-flex fixed-top flex-nowrap flex-column">

  <div class="d-flex flex-nowrap" style="height:30px;width:100%;margin-top:0px">
    <div class="progress" style="height:30px;width:100%;margin-top:0px">
      <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
        aria-valuemin="0" aria-valuemax="100">
        <b> {{ progress }}%</b>
      </div>
    </div>
    {% if instructions %}
    <button class="btn btn-success btn-sm mx-2" data-toggle="modal" data-target="#exampleModal">Hướng dẫn</button>
    {% endif %}
  </div>

  <style>
    #upper {
      display: flex;
      width: 100%;
    }

    .navbar {
      padding-top: 2px;
      padding-bottom: 3px;
    }

    .navbar-nav {
      width: 100%;
      justify-content: space-between;
    }

    .my-navbar {
      flex-basis: 100%;
    }

    .nav-item.active {
      background: yellow
    }

    .nav-link {
      padding: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    #downer {
      min-width: 500px;
    }

    .nav-item {
      padding: 0 !important;
      flex-grow: 1;
      text-align: center;

      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
      /* Adjust the size and color of the shadow as needed */
      margin: 0 5px;
      /* Add some space between items */
    }
  </style>
 
 



</nav>

{% endblock %}


<div class="otree-body container mt-5" style="margin-top:80px!important;">
  <h2 class="otree-title page-header">{% block title %}{% endblock %}</h2>
  {% if view.remaining_timeout_seconds != None %}
  {% include 'otree/includes/TimeLimit.html' with form_element_id="form" %}
  {% endif %}
  {% if form.errors %}
  <div class="otree-form-errors alert alert-danger">
    {% blocktrans trimmed %}Please fix the errors in the form.{% endblocktrans %}
    {{ form.non_field_errors }}
  </div>
  {% endif %}{% if js_vars|default:False %}
  <script>var js_vars = {{ js_vars| json }};</script>{% endif %}
  <form class="otree-form" method="post" role="form" id="form" autocomplete="off">{% csrf_token %}
    <div class="_otree-content">{% block content %}{% endblock %}</div>
  </form>
  <br />
  {# need the default:False for projects with old MTurkLandingPage #}
  {% if view.is_debug|default:False %}
  <br>
  {% include 'otree/includes/debug_info.html' %}
  {% endif %}
</div>
{% endblock %}