+
+<script id="tmpl-theme" type="text/template">
+ <# if ( data.screenshot_url ) { #>
+ <div class="theme-screenshot">
+ <img src="{{ data.screenshot_url }}" alt="" />
+ </div>
+ <# } else { #>
+ <div class="theme-screenshot blank"></div>
+ <# } #>
+ <span class="more-details"><?php _ex( 'Details & Preview', 'theme' ); ?></span>
+ <div class="theme-author">
+ <?php
+ /* translators: %s: Theme author name */
+ printf( __( 'By %s' ), '{{ data.author }}' );
+ ?>
+ </div>
+ <h3 class="theme-name">{{ data.name }}</h3>
+
+ <div class="theme-actions">
+ <# if ( data.installed ) { #>
+ <?php
+ /* translators: %s: Theme name */
+ $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' );
+ ?>
+ <# if ( data.activate_url ) { #>
+ <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a>
+ <# } #>
+ <# if ( data.customize_url ) { #>
+ <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a>
+ <# } else { #>
+ <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
+ <# } #>
+ <# } else { #>
+ <?php
+ /* translators: %s: Theme name */
+ $aria_label = sprintf( __( 'Install %s' ), '{{ data.name }}' );
+ ?>
+ <a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a>
+ <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button>
+ <# } #>
+ </div>
+
+ <# if ( data.installed ) { #>
+ <div class="notice notice-success notice-alt"><p><?php _ex( 'Installed', 'theme' ); ?></p></div>
+ <# } #>
+</script>
+
+<script id="tmpl-theme-preview" type="text/template">
+ <div class="wp-full-overlay-sidebar">
+ <div class="wp-full-overlay-header">
+ <button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
+ <button class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
+ <button class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
+ <# if ( data.installed ) { #>
+ <a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>
+ <# } else { #>
+ <a href="{{ data.install_url }}" class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></a>
+ <# } #>
+ </div>
+ <div class="wp-full-overlay-sidebar-content">
+ <div class="install-theme-info">
+ <h3 class="theme-name">{{ data.name }}</h3>
+ <span class="theme-by">
+ <?php
+ /* translators: %s: Theme author name */
+ printf( __( 'By %s' ), '{{ data.author }}' );
+ ?>
+ </span>
+
+ <img class="theme-screenshot" src="{{ data.screenshot_url }}" alt="" />
+
+ <div class="theme-details">
+ <# if ( data.rating ) { #>
+ <div class="theme-rating">
+ {{{ data.stars }}}
+ <span class="num-ratings">({{ data.num_ratings }})</span>
+ </div>
+ <# } else { #>
+ <span class="no-rating"><?php _e( 'This theme has not been rated yet.' ); ?></span>
+ <# } #>
+ <div class="theme-version">
+ <?php
+ /* translators: %s: Theme version */
+ printf( __( 'Version: %s' ), '{{ data.version }}' );
+ ?>
+ </div>
+ <div class="theme-description">{{{ data.description }}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="wp-full-overlay-footer">
+ <button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+ <span class="collapse-sidebar-arrow"></span>
+ <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+ </button>
+ </div>
+ </div>
+ <div class="wp-full-overlay-main">
+ <iframe src="{{ data.preview_url }}" title="<?php esc_attr_e( 'Preview' ); ?>"></iframe>
+ </div>
+</script>
+