<?php if( count($fiches)>0 ) : ?>
<?php
$imgwidth=600;
$imgheight=600;
$classnb = 1;
$agenda = 'tout';
$datejour = time();
$rowcol = ''; // declaration d'une chaine de char vide
$modal = ''; // declaration d'une chaine de char vide
?>
<?php /* traces : pour avoir date en mois : <?php echo str_replace('00:00', '', date("M", strtotime($fiche['bf_date_debut_evenement']))); ?> */ ?>

<div class="agenda-container">
  <?php foreach($fiches as $fiche): ?>
  <div class="bazar-entry agenda-entry-container" <?php echo $fiche['html_data'];?>>
    <figure class="agenda-entry" data-tag="<?php echo $fiche['id_fiche'];?>">
      <a class="modalbox"
         title="<?php echo htmlspecialchars($fiche['bf_titre']);?>"
         href="<?php echo $fiche['url']; ?>" data-iframe="1">
      <div class="image">
        <?php if (isset($fiche['imagebf_image']) && $fiche['imagebf_image']!='') : ?>
          <img loading="lazy" class="img-responsive" alt=""
            src="<?php echo (isset($fiche['external-data']))
              ? $fiche['external-data']['baseUrl'] . 'cache/image_'.$imgwidth.'x'.$imgheight.'_'.$fiche['imagebf_image']
              : redimensionner_image('files/'.$fiche['imagebf_image'], 'cache/image_'.$imgwidth.'x'.$imgheight.'_'.$fiche['imagebf_image'], $imgwidth, $imgheight, 'crop'); ?>"
              <?php echo (isset($fiche['external-data']))
                ? 'onerror="this.src=\''.$fiche['external-data']['baseUrl'].'files/'.$fiche['imagebf_image'].'\'"'
                : '' //TODO refactor redimensionner_image to use url and local cache ; idea  http://image.intervention.io/  ?
              ;?>>
        <?php else : ?>
          <img loading="lazy" class="img-responsive" alt=""
               src="tools/bazar/libs/vendor/placeholder.php?size=600x600&amp;bg=efefef&amp;text=">
        <?php endif; ?>
      </div>
      <fig-caption>
        <h5><?php echo $fiche['bf_titre'];?></h5>
      </fig-caption>
      <?php $useModal = $GLOBALS['wiki']->GetParameter('modal') == 1; ?>
      </a>
      <button class="btn-select btn btn-block "><span class="select">+ Sélectionner</span><span class="deselect">- Désélectionner</span></button>
    </figure>
  </div>
  <?php endforeach; ?>
</div>
<div id="selected-actions">
  <strong>Pour la sélection :</strong>
  <a class="btn-print-selected btn btn-primary">🖨️ Imprimer</a>
  <form class="form-submit-selection form-inline" method="GET">
    <div class="form-group">
      <label class="sr-only" for="title">Titre de ma sélection</label>
      <div class="input-group">
        <input required id="title" placeholder="Titre de ma sélection" class="form-control" type="text" />
        <div class="input-group-addon">
          <button type="submit" class="btn-save-selected btn btn-primary">💾 Sauver</button>
        </div>
      </div>
    </div>
  </form>
</div>
<?php $GLOBALS['wiki']->AddCSSFile('tools/bazar/presentation/styles/agenda.css'); ?>
<style>
  <?php
   // Nombres de colonne
   $nbcol = $GLOBALS['wiki']->GetParameter('nbcol');
   $width = empty($nbcol) ? 25 : 100 / $nbcol;
  ?>
  .agenda-entry-container {
    width: <?php echo $width; ?>%;
    padding: 1rem;
  }
  @media (max-width: 900px) { .agenda-entry-container { width: 33%; } }
  @media (max-width: 800px) {
    .agenda-entry-container { width: 50%; } 
    #selected-actions {
      flex-direction: column;
      gap: .5em;
    }
    #yw-topnav .navbar-brand img {
      margin-top: 0;
    }
  }
  @media (max-width: 600px) {
    .agenda-entry-container { width: 100%; }
  }
  .agenda-entry a {
  display: block;
  min-height: 160px;
  position: relative !important;
}
  .btn-select {
    z-index: 1; 
    background-color: var(--neutral-color);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .btn-select, .btn-select:active, .btn-select:focus {color:#fff}
  .deselect {display: none; }
  .selected .deselect {display: block;}
  .selected .select {display: none;}
  .selected {border:5px yellow solid;}
  #selected-actions {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index: 10;
    align-items: center;
    justify-content: space-between;
    background: yellow;
    padding: 1em;
  }
  .form-inline .form-group.input {
    margin-top: 0;
  }
  #title {
    width: 190px;
  }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
  $('.btn-select').on('click', function() {
    $(this).parent().toggleClass('selected')
    if ($('.selected').length > 0) {
      $('#selected-actions').css('display', 'flex')
    } else {
      $('#selected-actions').css('display', 'none')
    }
  });
  $('.btn-print-selected').on('click', function() {
    let content = ''
    $.each( $('.selected'), function( key, value ) {
      content = content + "\n" +'{{include page="'+value.getAttribute('data-tag')+'"}}' 
    });
    content = content + '""<div class="indications">'
      + '<img src="custom/templates/bazar/assets/Instructions_pliage_recto.webp" alt="instructions recto" />'
      + '</div>'
      + '<div class="indications2">'
      + '<img src="custom/templates/bazar/assets/Instructions_pliage_verso.webp" alt="instructions verso" />'
      + '</div>""'
    window.location.href = '/?wiki/render&print=1&content='+content+'&returnTo=<?php echo $GLOBALS['wiki']->href('', 'Merci'); ?>';
    return false;
  })
  $('.btn-save-selected').on('click', function(e){
    e.preventDefault()
    let bf_activite = Array()
    $.each( $('.selected'), function( key, value ) {
      bf_activite[value.getAttribute('data-tag')] = value.getAttribute('data-tag')
    });
    bf_activite = Object.assign({}, bf_activite)
    const settings = {
      async: true,
      crossDomain: true,
      url: '?api/entries/21',
      method: 'POST',
      headers: {
        Authorization: 'Bearer ScTSZnBTCw6SWnpThhAAodKh4brbwrnHwxn5jzIsOLxjk4SotxlFbrqnZnEEvVvb'
      },
      data: JSON.stringify({ bf_titre: $('#title').val(), bf_activite, id_typeannonce: 21 }),
      contentType: 'application/json'
    };
    $.ajax(settings).done(function (response) {
      toastMessage(
              "La sélection est créée, allons la voir!",
              2000,
              'alert alert-success'
            )
      setTimeout(function() { window.location.href = response.success }, 2000)

    }).fail(function (response) {
        const regex = /can not be generated from/gm;
        if (response.statusText == "error" && regex.exec(response.responseText)) {
            toastMessage(
              "Veuillez renseigner un titre pour la sélection",
              3000,
              'alert alert-danger'
            )
        }
        
    });
    return false;
  })
});
</script>

<?php endif; ?>
<?php echo $pager_links;?>