Show all available themes in a network with screenshot

Show all available themes in a network with screenshot.php

<?php
/*
 * Use: [show_available_themes] or [show_available_themes col="3"]
 */
function show_available_themes_cb( $atts ) {
	$atts = shortcode_atts( array(
            'col' => 4
	), $atts, 'show_available_themes' );

	$themes = wp_get_themes();
        
        echo '<div class="theme_col"><ul>';
        foreach( $themes as $key => $val ){
            ?>
            <li style="width: <?php echo 100 / $atts['col'] ?>%">
                <div class="theme_wrap">
                    <div class="theme_thumb">
                        <img src="<?php echo $val->get_screenshot() ?>"/>
                    </div>
                    <div class="theme_desc">
                        <?php echo $val; ?>
                    </div>
                </div>
            </li>
            <?php
        }
        echo '</ul></div>';
}
add_shortcode( 'show_available_themes', 'show_available_themes_cb' );

add_action( 'wp_footer', 'show_available_themes_script' );
function show_available_themes_script() {
    ?>
    <style>
    .theme_col{overflow: hidden;}
    .theme_col ul{list-style-type: none; margin: 0; padding: 0;}
    .theme_col ul li{float: left; padding: 10px; margin: 0; box-sizing: border-box}
    .theme_col ul li img{width: 100%}
    .theme_wrap{position: relative;}
    .theme_desc{position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); color: #fff; width: 100%; padding: 5px 10px; box-sizing: border-box; text-align: center}
    </style>
    <?php
}