<%
let sample;

let data = { img: '/img/image.jpg', alt: 'text alternatif de l’image' }

let samples = [
    { title: 'Cards verticales', sample: './samples/card-default', data: data },
    { title: 'Cards verticales, sans image, détail et flèche', sample: './samples/card-default', data: { arrow: false, detail: false } },
    { title: 'Cards horizontales', sample: './samples/card-horizontal', data: { ...data, horizontal: true } },
];
%>

<div class="<%= prefix %>-grid-row <%= prefix %>-grid-row--gutters">
    <% sample = samples[0]; %>
    <div class="<%= prefix %>-col-12">
        <h4><%= sample.title %></h4>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-3">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-3">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-6">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-4">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-8">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12">
        <%- snippet(include(sample.sample, sample.data)); %>
    </div>
    <% sample = samples[1]; %>
    <div class="<%= prefix %>-col-12">
        <h4><%= sample.title %></h4>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-3">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-3">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12 <%= prefix %>-col-md-3">
        <%- include(sample.sample, sample.data); %>
    </div>

    <div class="<%= prefix %>-col-12">
        <%- snippet(include(sample.sample, sample.data)); %>
    </div>

    <%
    sample = samples[2];
    %>
    <div class="<%= prefix %>-col-12">
        <h3><%= sample.title %></h3>
    </div>
    <div class="<%= prefix %>-col-12">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12">
        <%- include(sample.sample, sample.data); %>
    </div>
    <div class="<%= prefix %>-col-12">
        <%- snippet(include(sample.sample, sample.data)); %>
    </div>
</div>
