{% load static %}
<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">
<div id="splash">
    <center>
        <h4>Carregando ambiente</h4>
        <br/>
        <img src={% static "docme/load.gif" %} />
    </center>
</div>
{% for app, features in json_doc.items %}
    <h1>Aplicação: {{ app }}</h1>
    {% for feature_name, feature in features.items %}
       <h2>&nbsp&nbsp Funionalidade: {{ feature_name }}</h2>
        <p>&nbsp&nbsp &nbsp&nbsp {{ feature.description }}</p>
        <div class="container">
            {% for scenario_name, scenario in feature.scenarios.items %}
                <div class="row">
                    <div class="scenario-box col-md-8 offset-md-2">
                        <h3>&nbsp&nbsp&nbsp&nbsp Scenario: {{scenario_name}}</h3>
                        <hr>
                        <p>&nbsp&nbsp&nbsp&nbsp {{ scenario.description }}</p>
                        <a href="#" class="btn btn-success"onclick="start_tour('{{app}}', '{{feature_name}}', '{{scenario_name}}')">
                            Validar este cenário
                        </a>
                    </div>
                </div>
            {% endfor %}
        <div>
    {% endfor %}
{% endfor %}
<style>
    .scenario-box {
        background: #ECECEC;
        padding: 30px;
        border-radius: 10px;
        text-align: center;
        margin-top: 20px;
    }
    #splash {
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        width:100%;
        height: 100%;
        z-index: 1000;
        background-color:white;
        display: none;
    }
    #splash img{
        width: 50px;
        height: 50px;
    }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
    doc_json = {{ json_doc|safe }}
    function start_tour(app, feature_name, scenario_name) {
        localStorage.setItem("app", app);
        localStorage.setItem("feature_name", feature_name);
        localStorage.setItem("scenario_name", scenario_name);
        localStorage.setItem("auto_tour_enabled", true);
        $('#splash').fadeIn(500);
        $.get("/docme/start_tour", { app: app, feature_name: feature_name, scenario_name: scenario_name })
            .done(function (data) {
                $('#splash').fadeOut(100);
                window.location.replace(data.next_path);
            });
    }
</script>
