<?php
/**
 * @author Amasty Team
 * @copyright Copyright (c) 2021 Amasty (https://www.amasty.com)
 * @package Amasty_AdvancedReview
 */
?>
<?php
/** @var \Amasty\AdvancedReview\Block\Sizefits $block */
// phpcs:ignoreFile
?>
 
<?php $count = $block->getReviewsCount(); 
$t =  [ 1 => __('Small') , 2 => __('True to Size') ,3 => __('Large')  				 
										] ;
										?>
<div class="amreview-summary-details amreview-summary-details-fit pages">
<p>Did the item fit well?</p>
    <?php foreach ($block->getDetailedSummary() as $key => $detail) : ?>
        <a class="amreview-label" rel="nofollow">
                <p class="amreview-stars"><?= $t[$key] ?></p>
                <div class="amreview-bar">
                    <div class="amreview-bar -active"
                         style="width:<?= /* @noEscape */ $count ? round($detail / $count * 100) : 0 ?>%"></div>
                </div>
            <p class="amreview-text"><?= /* @noEscape */ $count ? round($detail / $count * 100) : 0 ?>% (<?= /* @noEscape */ $detail?>)</p>
        </a>
    <?php endforeach; ?>
</div>
<style>
.amreview-summary-details-fit.amreview-summary-details.pages p.amreview-stars {
    width: 80px;
}input.amrev-input {
    box-shadow: none;
    margin: 0;
    padding: 0;
}
</style>
<script>
require(['jquery','matchMedia'],function($,mediaCheck){
	 'use strict';

    mediaCheck({
        media: '(max-width: 768px)',
        entry: function () {
   $('.amrev-toolbar-container.-all .amrev-sorting').on('click',function(){$('.amrev-toolbar-container .amrev-filters').toggle();})
        }, 
        exit: function () {
			
   $('.amrev-toolbar-container.-all .amrev-sorting').on('click',function(){ })
        }
    });
	
})
</script>