<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        html {
            font-size: 0.5rem;
        }

        @media (min-width: 576px) {
            html {
                font-size: 0.625rem;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: 0.75rem;
            }
        }

        @media (min-width: 992px) {
            html {
                font-size: 0.875rem;
            }
        }

        @media (min-width: 1200px) {
            html {
                font-size: 1rem;
            }
        }
    </style>
    <title>RADIFOX QA - {{ project_id | upper() }}</title>
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top navbar-dark bg-dark">
    <a class="navbar-brand" href="{{ url_for('index') }}">RADIFOX QA</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item {% if not session['qa_mode'] or session['qa_mode'] == 'conversion' %}active{% endif %}">
        <a class="nav-link" href="{{ url_for('set_mode', mode='conversion') }}">Conversion</a>
      </li>
      <li class="nav-item {% if session['qa_mode'] == 'processing' %}active{% endif %}">
        <a class="nav-link" href="{{ url_for('set_mode', mode='processing') }}">Processing</a>
      </li>
    </ul>
    <span class="navbar-text">{{ project_id | upper() }}</span>
  </div>
</nav>
<div class="container-fluid">
    <br/>
    <h1 class="text-center">Subjects</h1>
    <hr/>
    <div class="row">
        {% for subject in subjects %}
            <div class="col-6 col-sm-4 col-lg-3">
                <a href="{{ url_for('subject', project_id=project_id, subject_id=subject) }}">
                    <h4 class="text-center text-monospace">{{ subject }}</h4>
                </a>
            </div>
        {% endfor %}
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>
</html>
