<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<?php
$rowcol = ''; // declaration d'une chaine de char vide
$type = ''; // declaration d'une chaine de char vide
$modal = ''; // declaration d'une chaine de char vide

/*******************************************************************************
 * parametres du template :
 * ils peuvent être passés dans l'action bazar ou bazarliste,
 * mais sont spécifiques à ce template
 ******************************************************************************/

 // test si on veut affichage modal ou pas
 $modal = $GLOBALS['wiki']->GetParameter('modal');
 if (empty($modal)) {
     $modal = 'non';
 }

 if ($modal==1) {
     $modal = 'modalbox';
 }


// version simple (oneclick) ou complexe (les deux valeurs du param)
$type = $GLOBALS['wiki']->GetParameter('type');
if (empty($type)) {
    $type = 'complexe';
}

// nombre de colonnes
$nbcol = $GLOBALS['wiki']->GetParameter('nbcol');
if (empty($nbcol)) {
    $nbcol = 4;
}

// test sur colonne et transformation en info poour le row
if ($nbcol==1) {
    $rowcol = 12;
}

if ($nbcol==2) {
    $rowcol = 6;
}

if ($nbcol==3) {
    $rowcol = 4;
}

if ($nbcol==4) {
    $rowcol = 3;
}

if ($nbcol==6) {
    $rowcol = 2;
}

echo $info_res;
$classes = array('Red', 'Blue-Grey', 'Pink', 'Purple', 'Deep-Purple', 'Indigo', 'Blue', 'Light-Blue', 'Cyan', 'Teal', 'Green', 'Light-Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep-Orange', 'Brown', 'Grey');
$nbclasses = count($classes);


if ($type != 'simple') :

if ( count($fiches)>0 ) : ?>
  <div class="row">
  <?php foreach ($fiches as $fiche) : ?>

        <div class="col-md-<?php echo $rowcol; ?> col-sm-6 col-xs-12 bazar-entry material-card-entry" <?php echo $fiche['html_data'];?>">
			  <?php
				$color = getCustomValueForEntry(
				  $params['color'],
				  $params['colorfield'],
				  $fiche,
				  ''
				);
				if (!empty($color)) {
					echo '<article class="material-card '.ucfirst($color).'">';
				} else {
					echo '<article class="material-card '.$classes[rand(0, $nbclasses-1)].'">';
				}
				?>
          <h2>
                      <span><?php echo $fiche['bf_titre']; ?></span>
                      <strong>
                          <i class="fa fa-fw fa-star"></i>
                          <?php echo $fiche['bf_baseline'] ?? ''; ?>
                      </strong>
                  </h2>
          <div class="mc-content">
            <?php if (isset($fiche['imagebf_image']) && $fiche['imagebf_image']!='') : ?>
              <div class="img-container">
                <img loading="lazy" class="img-responsive" src="<?php echo redimensionner_image(
                    'files/' . $fiche['imagebf_image'],
                    'cache/image_800x800_' . $fiche['imagebf_image'],
                    800,
                    800,
                    'crop'
                ); ?>" alt="">
              </div>
            <?php else : ?>
              <div class="img-container">
                <img loading="lazy" class="img-responsive" alt=""
                src="<?php echo ('tools/bazar/presentation/images/placeholder-800-800.jpg'); ?>">
              </div>
            <?php endif; ?>

            <div class="mc-description">
              <?php echo $GLOBALS['wiki']->Format($fiche['bf_description']); ?>
            </div>
          </div>
          <a class="mc-btn-action">
            <i class="fa fa-bars"></i>
          </a>
          <div class="mc-footer">
            <h4 class="hide">En savoir plus</h4>
            <a href="<?php echo $GLOBALS['wiki']->href('',$fiche['id_fiche']);?>" class="fa fa-fw fa-info-circle"></a>
            <div class="pull-right">
              <?php if ($GLOBALS['wiki']->HasAccess("write")) : ?>
              <a href="<?php echo $GLOBALS['wiki']->href('edit', $fiche['id_fiche']); ?>" class="fa fa-fw fa-pencil-square-o"></a>
              <?php endif; ?>
              <?php if ($GLOBALS['wiki']->UserIsAdmin() || $GLOBALS['wiki']->UserIsOwner()) : ?>
              <a href="<?php echo $GLOBALS['wiki']->href('deletepage', $fiche['id_fiche']); ?>" class="fa fa-fw fa-trash modalbox"></a>
              <?php endif; ?>
            </div>
          </div>
        </article>
      </div>
  <?php endforeach; ?>
  </div>
<?php endif; ?>
<?php echo $pager_links; ?>
<?php
$GLOBALS['wiki']->AddCSSFile('tools/bazar/presentation/styles/material-card.css');
$js = "$(function() {
  $('.material-card > .mc-btn-action').click(function() {
    var card = $(this).parent('.material-card');
    var icon = $(this).children('i');
    icon.addClass('fa-spin-fast');

    if (card.hasClass('mc-active')) {
      card.removeClass('mc-active');

      window.setTimeout(function() {
        icon
          .removeClass('fa-arrow-left')
          .removeClass('fa-spin-fast')
          .addClass('fa-bars');

      }, 800);
    } else {
      card.addClass('mc-active');

      window.setTimeout(function() {
        icon
          .removeClass('fa-bars')
          .removeClass('fa-spin-fast')
          .addClass('fa-arrow-left');

      }, 800);
    }
  });
});";
$GLOBALS['wiki']->AddJavascript($js);
?>
<?php endif; ?>

<?php if ($type == 'simple') : ?>
<?php if( count($fiches)>0 ) : ?>
<div class="row">
<?php foreach ($fiches as $fiche) : ?>
  <style>
  .modal-header {
      display:none;
  }
  </style>

    <div class="col-md-<?php echo $rowcol; ?> col-sm-6 col-xs-12 bazar-entry material-card-entry" <?php echo $fiche['html_data'];?>">
      <a class="<?php echo $modal; ?>" title="<?php echo htmlspecialchars($fiche['bf_titre']);?>" href="<?php echo $GLOBALS['wiki']->href('',$fiche['id_fiche']);?>">
			<?php
			$color = getCustomValueForEntry(
			  $params['color'],
			  $params['colorfield'],
			  $fiche,
			  ''
			);
			if (!empty($color)) {
				echo '<article class="material-card '.ucfirst($color).'">';
			} else {
				echo '<article class="material-card '.$classes[rand(0, $nbclasses-1)].'">';
			}
 			?>
     <h2>
                    <span><?php echo $fiche['bf_titre']; ?> </span>
        </h2>
        <div class="mc-content">
          <?php if (isset($fiche['imagebf_image']) && $fiche['imagebf_image']!='') : ?>
            <div class="img-container">
              <img loading="lazy" class="img-responsive" src="<?php echo redimensionner_image(
                  'files/' . $fiche['imagebf_image'],
                  'cache/image_800x800_' . $fiche['imagebf_image'],
                  800,
                  800,
                  'crop'
              ); ?>" alt="">
            </div>
          <?php else : ?>
            <div class="img-container">
              <img loading="lazy" class="img-responsive" alt=""
              src="<?php echo ('tools/bazar/presentation/images/placeholder-800-800.jpg'); ?>">
            </div>
          <?php endif; ?>
        </div>
      </article> </a>
    </div>

<?php endforeach; ?>
</div>

<?php endif; ?>

<?php echo $pager_links; ?>
<?php
$GLOBALS['wiki']->AddCSSFile('tools/bazar/presentation/styles/material-card.css');
$js = "$(function() {
  $('.material-card > .mc-btn-action').click(function() {
    var card = $(this).parent('.material-card');
    var icon = $(this).children('i');
    icon.addClass('fa-spin-fast');

    if (card.hasClass('mc-active')) {
      card.removeClass('mc-active');

      window.setTimeout(function() {
        icon
          .removeClass('fa-arrow-left')
          .removeClass('fa-spin-fast')
          .addClass('fa-bars');

      }, 800);
    } else {
      card.addClass('mc-active');

      window.setTimeout(function() {
        icon
          .removeClass('fa-bars')
          .removeClass('fa-spin-fast')
          .addClass('fa-arrow-left');

      }, 800);
    }
  });
});";
$GLOBALS['wiki']->AddJavascript($js);
?>
<?php endif; ?>
<?php echo $pager_links;?>
