{% extends '@ChillMain/layout.html.twig' %}

{% block title %}
  SASS Assets Catalogue
{% endblock %}

{% block css %}
<style media="screen">
    h2 { margin: 1.5em 0; }
    div.flex-table ul, div.flex-bloc ul { padding-left: 1rem; }
    div.flex-table div.item-bloc div.item-row div.item-col:first-child { flex-basis: 20%; }
    div.flex-bloc div.item-bloc { flex-basis: 50%; }
</style>
{% endblock %}

{% block content %}
<div class="col-md-10">
<h1 class="display-4">{{ block('title') }}</h1>

<b>Voir aussi: </b>
<a href="{{ path('sass_assets_test1') }}">Test 1</a> |
<a href="{{ path('sass_assets_test2') }}">Test 2</a>

<h2>Flex-table et flex-bloc</h2>
<p>Base d'un placement flex alternatif à l'usage des tables.
  Flex-table et flex-bloc utilisent la même structure html (seul la root class change).
  Le placement est responsive.
  La bordure utilise box-shadow pour simuler border-collapse (table).
  </p>
<p>Une classe separator peut être appliquée sur item-row</p>

<xmp>
<div class="flex-table">
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col"></div>
      <div class="item-col"></div>
    </div>
    <div class="item-row separator">
      <div class="item-col"></div>
      <div class="item-col"></div>
    </div>
  </div>
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col"></div>
      <div class="item-col"></div>
    </div>
    <div class="item-row">
      <div class="item-col"></div>
      <div class="item-col"></div>
    </div>
  </div>
</div>
</xmp>

<h3>Flex-table</h3>
<p>On fixe manuellement la largeur de la première colonne :
<pre>div.flex-table div.item-bloc div.item-row div.item-col:first-child { flex-basis: 20%; }</pre>
</p>
<div class="flex-table debug">
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col">Title row1</div>
      <div class="item-col">
        <ul class="list-content">
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
        </ul>
      </div>
    </div>
    <div class="item-row separator">
      <div class="item-col">Title row2</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
    <div class="item-row">
      <div class="item-col">Title row3</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
  </div>
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col">Title row1</div>
      <div class="item-col">
        <ul class="list-content">
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
        </ul>
      </div>
    </div>
    <div class="item-row">
      <div class="item-col">Title row2</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
  </div>
</div>

<h3>Flex-bloc</h3>
<p>On fixe manuellement la largeur des blocs :
<pre>div.flex-bloc div.item-bloc { flex-basis: 50%; }</pre>
</p>
<div class="flex-bloc debug">
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col">Title row1</div>
      <div class="item-col">
        <ul class="list-content">
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
        </ul>
      </div>
    </div>
    <div class="item-row separator">
      <div class="item-col">Title row2</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
    <div class="item-row">
      <div class="item-col">Title row3</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
  </div>
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col">Title row1</div>
      <div class="item-col">
        <ul class="list-content">
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
          <li>Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</li>
        </ul>
      </div>
    </div>
    <div class="item-row">
      <div class="item-col">Title row2</div>
      <div class="item-col">Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac viverra et a dui.</div>
    </div>
  </div>
</div>

<h2>Fix the title in the flex table</h2>

<p>This will fix the layout of the row, with a "title" element, and an aside element. Using <code>css grid</code>, this is quite safe and won't overflow</p>

<xmp>
    <div class="flex-table">
        <div class="item-bloc">
            <div class="item-row">
                <div class="item-two-col-grid">
                    <div class="title">This is my title</div>
                    <div class="aside">Aside value</div>
                </div>
            </div>
        </div>
        <div class="item-bloc">
            <div class="item-row">
                <div class="item-two-col-grid">
                    <div class="title">
                        <div><h3>This is my title, which can be very long and take a lot of place. But it is wrapped successfully, and won't disturb the placement of the aside block</h3></div>
                        <div>This is a second line</div>
                    </div>
                    <div class="aside">Aside value</div>
                </div>
            </div>
        </div>
    </div>
</xmp>

    <p>will render:</p>

    <div class="flex-table">
        <div class="item-bloc">
            <div class="item-row">
                <div class="item-two-col-grid">
                    <div class="title">This is my title</div>
                    <div class="aside">Aside value</div>
                </div>
            </div>
        </div>
        <div class="item-bloc">
            <div class="item-row">
                <div class="item-two-col-grid">
                    <div class="title">
                        <div><h3>This is my title, which can be very long and take a lot of place. But it is wrapped successfully, and won't disturb the placement of the aside block</h3></div>
                        <div>This is a second line</div>
                    </div>
                    <div class="aside">Aside value</div>
                </div>
            </div>
        </div>
    </div>


<h2>Wrap-list</h2>
<p>Une liste inline qui s'aligne, puis glisse sous son titre.</p>
<div class="wrap-list debug">
    <div class="wl-row">
        <div class="wl-col title">Usagers concernés</div>
        <div class="wl-col list">
            <p class="wl-item"><a href="#">Gaston Bah</a></p>
            <p class="wl-item"><a href="#">Alain Bah</a></p>
            <p class="wl-item"><a href="#">Adèle Gaillot</a></p>
            <p class="wl-item"><a href="#">Corentine Bah</a></p>
            <p class="wl-item"><a href="#">Justin Bah</a></p>
            <p class="wl-item"><a href="#">Michel Sardou</a></p>
            <p class="wl-item"><a href="#">Carine Rousseau</a></p>
            <p class="wl-item"><a href="#">Mohamed Martin</a></p>
        </div>
    </div>
    <div class="wl-row">
        <div class="wl-col title">Problématiques sociales</div>
        <div class="wl-col list">
            <p class="wl-item"><a href="#">Gaston Bah</a></p>
            <p class="wl-item"><a href="#">Alain Bah</a></p>
            <p class="wl-item"><a href="#">Adèle Gaillot</a></p>
        </div>
    </div>
</div>
<xmp>
<div class="wrap-list">
  <div class="wl-row">
    <div class="wl-col title">title</div>
    <div class="wl-col list">
      <p class="wl-item">item</p>
      <p class="wl-item">item</p>
      ...
    </div>
  </div>
  ...
</div>
</xmp>

<h2>Wrap-header</h2>
<p>Réglage d'une zone de titre sur 2 lignes.</p>
<div class="wrap-header debug">
  <div class="wh-row">
    <div class="wh-col">
        <span class="h3"><b>Title</b></span>
        <span class="badge rounded-pill bg-danger">badge</span>
    </div>
    <div class="wh-col">
      <span class="badge rounded-pill bg-primary">badge</span>
    </div>
  </div>
  <div class="wh-row">
    <div class="wh-col">from startdate to enddate</div>
    <div class="wh-col">text</div>
  </div>
</div>
<xmp>
<div class="wrap-header">
  <div class="wh-row">
    <div class="wh-col">line1 left</div>
    <div class="wh-col">line1 right</div>
  </div>
  <div class="wh-row">
    <div class="wh-col">line2 left</div>
    <div class="wh-col">line2 right</div>
  </div>
</div>
</xmp>

<h2>Float-button top</h2>
<p>Une zone de bouton flotte à droite d'un contenu. On peut voir en faisant varier la largeur que celui-ci vient s'adapter harmonieusement autour des boutons.</p>
<div class="float-button top debug">
    <div class="box">
        <div class="action">
            <ul class="record_actions">
                <li><button type="button" name="button">Annuler</button></li>
                <li><button type="button" name="button">Voir</button></li>
                <li><button type="button" name="button">Enregistrer</button></li>
            </ul>
        </div>
        Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
    </div>
</div>
<xmp>
<div class="float-button top">
  <div class="box">
    <div class="action">
      floating button
    </div>
    content ...
  </div>
</div>
</xmp>

<h2>Float-button bottom</h2>
<p>Avec la même structure, on accroche la zone de bouton en bas, toujours à droite. Voir <a href="https://css-tricks.com/float-an-element-to-the-bottom-corner/">source</a>. </p>
<div class="float-button bottom debug">
    <div class="box">
        <div class="action">
            <ul class="record_actions">
                <li><button type="button" name="button">Annuler</button></li>
                <li><button type="button" name="button">Voir</button></li>
                <li><button type="button" name="button">Enregistrer</button></li>
            </ul>
        </div>
        Nam rhoncus tristique ligula, tincidunt iaculis augue tincidunt ac. Proin fermentum mauris quam, ut suscipit nisl auctor at. Ut vestibulum ligula eget ex congue, efficitur interdum ipsum tincidunt. Integer id sapien et nibh tristique viverra et a dui. Ut blandit pharetra consectetur. Sed scelerisque eget purus at tempus. Etiam sit amet tellus et eros semper tempor. Curabitur suscipit pulvinar enim at lobortis. Ut nisl augue, cursus vel hendrerit sed, posuere vel sapien. Proin hendrerit arcu velit, eu ultrices dui interdum eget. Vestibulum consectetur sodales enim a accumsan. In vitae tristique leo, a fringilla nisl.
    </div>
</div>
<xmp>
<div class="float-button bottom">
  <div class="box">
    <div class="action">
      floating button
    </div>
    content ...
  </div>
</div>
</xmp>


<h1>Buttons</h1>
<ul class="record_actions">
  <li><a href="#" class="btn btn-submit">submit</a></li>
  <li><a href="#" class="btn btn-save">save</a></li>
  <li><a href="#" class="btn btn-create">create</a></li>
  <li><a href="#" class="btn btn-new">new</a></li>
  <li><a href="#" class="btn btn-duplicate">duplicate</a></li>
  <li><a href="#" class="btn btn-not-duplicate">not-duplicate</a></li>
  <li><a href="#" class="btn btn-reset">reset</a></li>
  <li><a href="#" class="btn btn-delete">delete</a></li>
  <li><a href="#" class="btn btn-danger">danger</a></li>
  <li><a href="#" class="btn btn-remove">remove</a></li>
  <li><a href="#" class="btn btn-unlink">unlink</a></li>
  <li><a href="#" class="btn btn-action">action</a></li>
  <li><a href="#" class="btn btn-edit">edit</a></li>
  <li><a href="#" class="btn btn-update">update</a></li>
  <li><a href="#" class="btn btn-show">show</a></li>
  <li><a href="#" class="btn btn-view">view</a></li>
  <li><a href="#" class="btn btn-misc">misc</a></li>
  <li><a href="#" class="btn btn-cancel">cancel</a></li>
  <li><a href="#" class="btn btn-choose">choose</a></li>
  <li><a href="#" class="btn btn-notify">notify</a></li>
  <li><a href="#" class="btn btn-tpchild">tpchild</a></li>
  <li><a href="#" class="btn btn-chill-beige">my button</a></li>
</ul>

    <h2>Variants of <pre>record_actions</pre></h2>

    <h3><pre>small</pre></h3>

    <ul class="record_actions small">
        <li><a href="#" class="btn btn-create"></a></li>
    </ul>

    <h3><pre>inline</pre></h3>

    <div>
        This is inline and small

        <ul class="record_actions small inline">
            <li><a href="#" class="btn btn-create"></a></li>
        </ul>
    </div>

    <h3><code>slim</code></h3>

    <p>Ajouter <code>slim</code> enlève la marge inférieure. Permet un meilleur alignement horizontal dans une <code>row</code></p>

    <div class="container">
        <div class="row row-hover">
            <div class="col-8">
                Some text, ul_record_actions sans slim
            </div>
            <div class="col-4">
                <ul class="record_actions">
                    <li><button class="btn">Some action</button></li>
                </ul>
            </div>
        </div>
        <div class="row row-hover">
            <div class="col-8">
                Some text, ul_record_actions avec slim
            </div>
            <div class="col-4">
                <ul class="record_actions slim">
                    <li><button class="btn">Some action</button></li>
                </ul>
            </div>
        </div>
    </div>



<xmp><a class="btn btn-submit">Text</a></xmp>
Toutes les classes btn-* de bootstrap sont fonctionnelles

    <h2>Hover</h2>

    <p>Ajouter <code>.row-hover</code> sur une class <code>.row</code> provoque un changement de background au survol</p>

    <div class="container">
        <div class="row row-hover align-items-center">
            <div class="col-sm-12 col-md-8">
                <span class="onthefly-container" data-target-name="person" data-target-id="329" data-action="show" data-button-text="Fatoumata Binta DIALLO (33 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatoumata Binta DIALLO (33 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
            </div>
            <div class="col-sm-12 col-md-4">
                <span class="text-end">A signé le 04/09/2024 à 13:55</span>
            </div>
        </div>
        <div class="row row-hover align-items-center">
            <div class="col-sm-12 col-md-8">
                <span class="onthefly-container" data-target-name="person" data-target-id="330" data-action="show" data-button-text="Abdoulaye DIALLO (9 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Abdoulaye DIALLO (9 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
            </div>
            <div class="col-sm-12 col-md-4">
                <ul class="record_actions">
                    <li>
                        <a class="btn btn-misc" href="/fr/main/workflow/signature/6/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row row-hover align-items-center">
            <div class="col-sm-12 col-md-8">
                <span class="onthefly-container" data-target-name="person" data-target-id="332" data-action="show" data-button-text="Mohamed DIALLO (44 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Mohamed DIALLO (44 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
            </div>
            <div class="col-sm-12 col-md-4">
                <span class="text-end">A signé le 04/09/2024 à 13:57</span>
            </div>
        </div>
        <div class="row row-hover align-items-center">
            <div class="col-sm-12 col-md-8">
                <span class="onthefly-container" data-target-name="person" data-target-id="333" data-action="show" data-button-text="Fatou DIALLO (37 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatou DIALLO (37 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
            </div>
            <div class="col-sm-12 col-md-4">
                <ul class="record_actions">
                    <li>
                        <a class="btn btn-misc" href="/fr/main/workflow/signature/8/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row row-hover align-items-center">
            <div class="col-sm-12 col-md-8">
                <span class="onthefly-container" data-target-name="person" data-target-id="334" data-action="show" data-button-text="Fanta DIALLO (7 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fanta DIALLO (7 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
            </div>
            <div class="col-sm-12 col-md-4">
                <ul class="record_actions">
                    <li>
                        <a class="btn btn-misc" href="/fr/main/workflow/signature/9/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <h1>Entity badges</h1>

    <span class="badge-accompanying-work-type-simple">Action d'accompagnement</span>
    <span class="badge-activity-type-simple">Type d'échange</span>
    <span class="badge-calendar-simple">Rendez-vous</span>
</div>


    <h1>Badges</h1>

    <p>
        <span class="badge bg-primary">Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-warning">Warning</span>
        <span class="badge bg-info">Info</span>
        <span class="badge bg-light">Light</span>
        <span class="badge bg-dark">Dark</span>
        <span class="badge bg-chill-blue">chill-blue</span>
        <span class="badge bg-chill-green">chill-green</span>
        <span class="badge bg-chill-yellow">chill-yellow</span>
        <span class="badge bg-chill-orange">chill-orange</span>
        <span class="badge bg-chill-red">chill-red</span>
        <span class="badge bg-chill-beige">chill-beige</span>
    </p>

{% endblock %}