{% for campaign in campaigns %}
    <div class="row">
        <div class="col-md-12">
            <div class="social-connection">
                <div class="overlay{{- (campaign.tracking != 1) ? ' disabled' : '' -}}"></div>
                <div class="has-error hidden">
                    <span class="error-message">{{ "ERROR_UNHANDLED_EXCEPTION"|translate }}</span>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <a class="btn social {{ campaign.social_type|lower }}">
                            <i class="fa fa-fw fa-{{ campaign.social_type|lower }}"></i>
                        </a>
                    </div>
                    <p class="col-md-7">
                        {{- (campaign.title is not empty) ? campaign.title : campaign.titel -}}
                    </p>
                    <div class="col-md-3">
                        {% if campaign.tracking != 1 %}
                            <p>{{ "DISCONNECTED_SOCIAL_APP"|translate }}</p>
                        {% else %}
                            <button type="button" class="btn btn-disconnect blue" data-toggle="modal"
                                    data-target="#modal{{ campaign.id }}-{{ campaign.social_type }}">
                                <i class="fa fa-fw fa-angle-right"></i> {{ "DISCONNECT_SOCIAL_APP"|translate }}
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal{{ campaign.id }}-{{ campaign.social_type }}" tabindex="-1" role="dialog"
         aria-labelledby="disconnectModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h2 class="text-center">
                        {% if campaign.social_type == 'facebook' %}
                            {{ "CONFIRM_DISCONNECT_TITLE_FACEBOOK"|translate }}
                        {% elseif campaign.social_type == 'twitter' %}
                            {{ "CONFIRM_DISCONNECT_TITLE_TWITTER"|translate }}
                        {% elseif campaign.social_type == 'instagram' %}
                            {{ "CONFIRM_DISCONNECT_TITLE_INSTAGRAM"|translate }}
                        {% endif %}
                        {{- (campaign.title is not empty) ? campaign.title : campaign.titel -}}
                    </h2>
                    <p class="text-center">{{ "DISCONNECT_EXPLANATION"|translate }}</p>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-primary blue pull-left" data-dismiss="modal"
                            aria-label="Close">
                        <i class="fa fa-angle-right"></i>
                        {{ "NO"|translate }}, {{ "CANCEL"|translate|lower }}
                    </button>

                    <button type="button" class="btn btn-primary grey pull-right disconnect"
                            onclick="$(this).button('loading'); disconnect({{ campaign.id }}, {{ campaign.user }}, '{{ campaign.social_type }}');"
                            data-loading-text="<i class='fa fa-fw fa-spin fa-spinner'></i> {{ "DISCONNECT_SOCIAL_APP"|translate }}">
                        <i class="fa fa-angle-right"></i>
                        {{ "YES"|translate }}, {{ "DISCONNECT_SOCIAL_APP"|translate|lower }}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<script type="text/javascript">
    function disconnect(campaign, user, socialType) {
        $.ajax({
            type: "DELETE",
            dataType: 'JSON',
            url: "{{ regGet('url') }}site/api/campaign/" + campaign + "/social/" + socialType,
            success: function() {
                setTimeout(function() {
                    window.location.reload();
                }, 1000)
            },
            error: function () {
                $('.modal').modal('hide');
                $('.has-error').removeClass('hidden');
            }
        })
    }
</script>