<div class="django-user-guide">
    {{ csrf_node }}
    <link rel="stylesheet" href="{{ css_href }}">

    {% if custom_css_href %}
    <link rel="stylesheet" href="{{ custom_css_href }}">
    {% endif %}

    <div class="django-user-guide-mask">
        <div class="django-user-guide-window">
            <div class="django-user-guide-close-div">x</div>

            <div class="django-user-guide-html-wrapper">
                {{ html|safe }}
            </div>

            <div class="django-user-guide-counter">
                <span>Tip 1 of 1</span>
            </div>
            <div class="django-user-guide-window-nav">
                <button class="django-user-guide-btn django-user-guide-back-btn">&larr; Back</button>
                <button class="django-user-guide-btn django-user-guide-next-btn">Next &rarr;</button>
                <button class="django-user-guide-btn django-user-guide-done-btn">Done</button>
            </div>
        </div>
    </div>

    <script src="{{ js_src }}"></script>

    {% if custom_js_src %}
    <script src="{{ custom_js_src }}"></script>
    {% endif %}

    <script>
        (new window.DjangoUserGuide({
            csrfCookieName: '{{ csrf_cookie_name }}',
            useCookies: {{ use_cookies }}
        })).run();
    </script>
</div>
