<?php
$demo_data      = $args['$demo_data'];
$demo_installed = $args['$demo_installed'];
?>

<div class="txw-importer-wrapper" data-template="tx-importer">
</div>

<script type="text/html" id="tmpl-tx-importer">
    <div class="theme-browser rendered">
        <div class="themes wp-clearfix">
            <# if ( _.size(data.demos) > 0 ) { #>
                <# _.each(data.demos, function(demo) { #>
                    <div class="theme tx-demo {{demo.key == data.installed ? 'installed active' : ''}}" data-tx-demo="{{demo.key}}">
                        <div class="theme-screenshot tx-screenshot">
                            <img src="{{demo['screenshot']}}" alt="{{demo['title']}}">
                        </div>

                        <h2 class="theme-name">{{demo['title']}}</h2>
                            
                        <div class="theme-actions">

                            <# if (demo.key == data.installed) { #>
                          
                                <# } else { #>
                                    <button class="button button-primary action-import"><?php esc_html_e( 'Install', 'edumodo' ); ?></button>
                                    <a class="button button-secondary" href="{{demo['demo_url']}}" target="_blank"><?php esc_html_e( 'Preview', 'edumodo' ); ?></a>
                                    <# } #>
                        </div>


                    </div>
                    <# }); #>
                        <# } else { #>
                            <h3 class="text-center"><?php esc_html_e( 'No demo content.', 'edumodo' ); ?></h3>
                            <# } #>
        </div>
    </div>
</script>
