<?php
/**
 *  location: catalog/view
 */
?>

<div class="qc-spinner"></div>
<d_quickcheckout id="d_quickcheckout" class="qc {% if edit %} edit {% endif %}"></d_quickcheckout>


{% if edit %}
    <style>
        body{
            margin-top: 60px;
        }
        body > #d_quickcheckout{
            display: block;
        }
    </style>
{% else %}
    <style>
        {% if state.layout.header_footer != 1 %}
            body > *{
                display: none;
            }
            body > .qc-spinner{
                display: block;
            }
            body > #d_quickcheckout{
                padding: 40px;
                display: block;
            }
        {% endif %}
    </style>
    <style>
    {{state.layout.css}}
    </style>
    <script>
        var header_footer = {{state.layout.header_footer}}
        if(header_footer != 1){
            $('body').prepend($('.qc-spinner'));
            $('body').prepend($('#d_quickcheckout'));

        }else{
            $('.qc-spinner').after($('#d_quickcheckout'));
        }
    </script>
    <script>
    {{state.layout.js}}
    </script>
{% endif %}

<script>
    var count = 0;
    var total = {{riot_tags|length}};
    var d_quickcheckout_store =  d_quickcheckout.createStore({{ state|json_encode() }});
    
    {% for riot_tag in riot_tags %}
        riot.compile('{{riot_tag}}', function(){
            count++;
            if(total == count){
                start();
            }
        });
    {% endfor %}

    
    function start(){

        riot.compile('catalog/view/theme/default/template/extension/module/d_quickcheckout.tag', function() {

          riot.mount(document.getElementById('d_quickcheckout'));
        })
    }
    
</script>