{% extends 'base.html.twig' %}

{% block wrapperClass %}campaignpage claim-your-spot{% endblock %}

{% block wrapperStyle %}

{% endblock %}

{% block body %}
    <div class="container clearfix navpadding">

        <div class="row">
            {{ renderTwigBlock('includes/campaigns/campaign.submenu',{ 'campaignData' : data}) }}

            <div class="col-md-9 col-sm-12 col-xs-12">
                <div class="content p20">
                    <div class="pb20">
                        {{ readFunnel(data.model, 3)|raw }}
                    </div>

                    <div>
                        <a class="p0" data-target="#tipModal" data-toggle="modal">
                            <i class="fa fa-fw fa-question-circle"></i>
                            {{ 'PAYOUT_DOS_AND_DONTS_TITLE'|translate }}</a>

                        {{ block('tipModal') }}
                    </div>
                </div>

                <payout-view
                    :campaign-id="{{ data.campaignId }}"
                    :language-id="{{ data.languageId }}"
                    :country-id="{{ data.countryId }}"
                ></payout-view>
            </div>

            {{ renderTwigBlock('includes/campaigns/campaign.sidebar', {'shareUrl' : buildCanonical()}) }}
        </div>
    </div>
{% endblock %}

{% block tipModal %}
    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="tipModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ readFunnel(data.model.tips, 3)|raw }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}