<section ng-app="next_ad_int-module">
    <h1>{{ i18n.title }}</h1>

    <div>
        {{ i18n.descriptionLine1|raw }}<br>
        {{ i18n.descriptionLine2|raw }}<br>
        <code>curl --data "next_ad_int-task=sync-to-wordpress&auth-code={{ authCode }}" {{ blogUrl }}/wp-admin/admin.php</code><br>
        <code>wget --post-data "next_ad_int-task=sync-to-wordpress&auth-code={{ authCode }}" {{ blogUrl }}/wp-admin/admin.php</code><br>
        <code>powershell -Command "Invoke-WebRequest -Uri {{ blogUrl }}/wp-admin/admin.php -Method POST -Body @{'next_ad_int-task'='sync-to-wordpress';'auth-code'='{{ authCode }}'}"</code>
    </div>

    <br>

    <div ng-init="sid = '{{ domainSidSet }}';
    syncEnabled = '{{ syncEnabled }}';
    syncUserSet = '{{ syncUserSet }}';
    syncPassSet = '{{ syncPassSet }}'"></div>

    <div ng-controller="SyncActionController">
        <form method="post" action="">
            <input type="hidden" name="security" value="{{ nonce }}"/>
            <button type="submit" name="syncToWordpress" class="button button-primary" ng-disabled="!enableSync">
                {{ status is defined ? i18n.repeatAction|raw : i18n.startAction|raw }}
            </button>
        </form>
        <div class="adi-status-alert container-fluid no-padding-left">
            <div ng-if="!enableSync" class="alert alert-warning">
                {{ i18n.syncDisabled | raw }}
            </div>
        </div>
    </div>
    <div class="container-fluid no-padding-left">
        {% if status is defined %}

            <div class="adi-status-alert">
                {% if status == true %}
                    <div class="alert alert-success" role="alert">{{ message }}</div>
                {% else %}
                    <div class="alert alert-danger" role="alert">{{ message }}</div>
                {% endif %}
            </div>

            {% set logs = log %}
            <h2>Log</h2>

            <button class="button button-primary" type="button" data-toggle="collapse" data-target="#log-output"
                    aria-expanded="false">
                {{ i18n.showLogOutput }}
            </button>
            <div class="collapse" id="log-output">
                <table class="table table-hover table-condensed table-responsive adi-log-table">
                    <tr>
                        <th class="col-md-1 text-align-center">Log Level</th>
                        <th class="text-align-center">Log Message</th>
                    </tr>
                    {% for logLine in logs %}

                        {% if logLine.level_name == 'WARNING' %}
                            <tr class="danger">
                                <td>{{ logLine.level_name }}</td>
                                <td>{{ logLine.message }}</td>
                            </tr>
                        {% elseif logLine.level_name == 'ERROR' %}
                            <tr class="danger">
                                <td>{{ logLine.level_name }}</td>
                                <td>{{ logLine.message }}</td>
                            </tr>
                        {% elseif logLine.level_name == 'INFO' %}
                            <tr>
                                <td>{{ logLine.level_name }}</td>
                                <td>{{ logLine.message }}</td>
                            </tr>
                        {#{% elseif logLine.level_name == 'DEBUG' %} <!-- You can include this for debug purposes -->#}
                            {#<tr class="info">#}
                                {#<td>{{ logLine.level_name }}</td>#}
                                {#<td>{{ logLine.message }}</td>#}
                            {#</tr>#}
                        {% endif %}

                    {% endfor %}

                    {% if status == true %}
                        <tr class="success">
                            <td>[STATUS]</td>
                            <td>
                                <b>{{ message }}</b>
                            </td>
                        </tr>
                    {% else %}
                        <tr class="danger result-danger">
                            <td>[STATUS]</td>
                            <td>
                                <b>{{ message }}</b>
                            </td>
                        </tr>
                    {% endif %}

                </table>
            </div>
        {% endif %}
    </div>
</section>