<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="expires" content="0">
        <link rel="stylesheet" href="{{ url_for('static', filename='resources/bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='resources/fontawesome.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16x16.png') }}">
        <script src="{{ url_for('static', filename='resources/jquery-3.3.1.min.js') }}"></script>
        <script src="{{ url_for('static', filename='resources/popper.min.js') }}"></script>
        <script src="{{ url_for('static', filename='resources/bootstrap.min.js') }}"></script>
        <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
        });
        </script>
        <title>Voice Cloning</title>
        {% block additional_scripts %}
        {% endblock %}
    </head>
    <body>
        <div class="container flex-grow-1 flex-shrink-0 py-5">
            <div class="mb-5 p-4 bg-white shadow-sm">
                <div class="row">
                    <a href="/manage-datasets" class="btn btn-info" style="margin: 0.5rem;">Manage datasets</a>
                    <a href="/import-export" class="btn btn-info" style="margin: 0.5rem;">Import/Export</a>
                    <a href="/settings" class="btn btn-secondary" style="margin: 0.5rem;">Settings</a>
                    <div style="margin-right: 0; margin-left:auto;">
                        <a href="https://benaandrew.github.io/Voice-Cloning-App/" target="_blank" style="margin: 0.5rem;"><i class="fas fa-book fa-2x"></i></a>
                        <a href="https://discord.com/invite/wQd7zKCWxT" target="_blank" style="margin: 0.5rem;"><i class="fab fa-discord fa-2x"></i></a>
                        <a href="https://voice-sharing-hub.herokuapp.com/" target="_blank" style="margin: 0.5rem;"><i class="fas fa-share-square fa-2x"></i></a>
                    </div>
                </div>
                <h3 class="text-center">Voice Cloning</h3>
                <div class="bs-stepper linear">
                    <div class="bs-stepper-header" role="tablist">
                        {% for key, value in urls.items() %}
                        <div class="step {% if path == key %} active {% endif %}">
                            <a class="step-trigger" role="tab" href="{{ key }}">
                                <span class="bs-stepper-circle">{{ loop.index }}</span>
                                <span>{{ value }}</span>
                            </a>
                        </div>
                        {% if not loop.last %}
                            <div class="bs-stepper-line"></div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <div class="bs-stepper-content">
                        {% block content %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
