{{ define "main" }}
<main class="large-container">
	{{ .Content }}
    <div class="pricing-layout"> 
        <div>
        <div class="moves">
            <h2>Forfait déplacement</h2>
            <ul>
                {{ range $.Site.Data.pricing.move }}
                <li class="move-item">
                    De {{ .min }} à {{ .max }} km : {{ if eq .price 0 }}Gratuit{{ else }}{{ .price }} €{{ end }}
                </li>
                {{ end }}
            </ul>
        </div>

        <div class="forfaits">

        {{ range $.Site.Data.pricing.forfait }}
            <div class="forfait">
            <h2>{{ .name }}</h2>
            <div class="forfait-price">{{ .price }} €</div>
            <ul>    
            {{ range .components }}
            <li>{{ .name }}</li>
            {{ end }}
            </ul>
            </div>
        {{ end }}
        </div>
        </div>

        <div class="operations-container">
        <h2>Liste des opérations</h2>
        <div class="operations-mosaic">
        {{ range $.Site.Data.pricing.standalone }}
            <div class="operations-category">
                <h3>{{ .name }}</h3>
                <table class="operations-table">
                    <tr>
                        <th>Opération</th>
                        <th class="operation-price">Prix</th>
                    </tr>
                    {{ range .components }}
                    <tr>
                        <td>{{ .name }}</td>
                        <td class="operation-price">{{ .price }} €</td>
                    </tr>
                    {{ end }}
                </table>
            </div>
        {{ end }}
        </div>
        </div>
    </div>
</main>
{{ end }}