{{/* USAGE: {{< sidebyside "gifv" "/path/to/src" "file1=caption" "file2=caption" >}} */}}

{{ $type := index .Params 0 }}
{{ $path := index .Params 1 }}
{{ $figures := after 2 .Params }}

<div class="container" style="width: 100%;">
    {{ $.Scratch.Set "size" (div 12 (len $figures)) }}
    {{ range $figure := $figures }}
        {{ $.Scratch.Set "src" (index (split $figure "=") 0) }}
        {{ $.Scratch.Set "title" (index (split $figure "=") 1) }}
        <div class="theme-table-image col-sm-{{ $.Scratch.Get "size" }}">
            <figure style="padding: 0px;">
                {{ if eq $type "gifv" }}
                    <div class="embed-responsive embed-responsive-4by3">
                        <video class="embed-responsive-item" preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline="">
                            <source src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" type="video/mp4">
                            Your browser doesn't support mp4 video. :(
                        </video>
                    </div>
                {{ else if eq $type "image" }}
                    <img src="{{ printf "%s%s" $path ($.Scratch.Get "src") }}" alt="{{ $.Scratch.Get "title" }}" />
                {{ end }}
                <figcaption>
                    <h4>
                        {{ $.Scratch.Get "title" }}
                    </h4>
                </figcaption>
            </figure>
        </div>
    {{ end }}
</div>