{% extends 'base_admin.html.twig' %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% block body %}
    <section class="dashboard-counts section-padding">
        <div class="container-fluid">
            {{ form_start(form, {'attr':{novalidate:'novalidate'}}) }}
            <div class="row">
                <div class="col-md-3">
                    <div id="new-updates" class="card updates recent-updated">
                        <div id="updates-header" class="card-header d-flex justify-content-between align-items-center">
                            <h2><a data-toggle="collapse">Web status</a></h2><a data-toggle="collapse" href="#updates-box"><i class="fa fa-angle-down"></i></a>
                        </div>
                        <div id="updates-box" role="tabpanel" class="collapse show" style="">
                            <ul class="news list-unstyled">
                                <!-- Item-->
                                {% for web in webs %}
                                    <li class="d-flex justify-content-between">
                                        <div class="left-col d-flex">
                                            <div class="title"><b>{{ web.company }}</b>
                                                <p style="width:200px; word-wrap:break-word;">{{ web.apiUrl }}</p>
                                            </div>
                                        </div>
                                        <div class="right-col text-center">
                                            <h1 class="text-center"><span class="badge badge-warning webStatus" data-url="{{ web.apiUrl }}" style="color: white !important; padding: 10px; margin-top: 10px;">Checking</span></h1>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="card">
                            <div class="card-header">
                                <div class="row">
                                    {% if role == 'ADMIN' %}
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            {{ form_widget(form.seller) }}
                                        </div>
                                    </div>
                                    {% else %}
                                        {{ form_widget(form.seller) }}
                                    {% endif %}
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            {{ form_widget(form.month) }}
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        {{ form_widget(form.year) }}
                                    </div>
                                </div>
                            </div>

                        <div class="card-body" id="widgetsContainer">
                        </div>
                    </div>

                    <!-- Summary tracking by dates -->
                    {% if is_granted('search_summary_tracking_date') %}
                    {{ render(controller(
                        'App\\Controller\\DashboardController::widgetSummaryTrackingByDate'
                    )) }}
                    {% endif %}
                </div>

            </div>
            {{ form_end(form) }}
            <div class="row">

            </div>
        </div>
    </section>
    <section>
        <div class="container-fluid">

        </div>
    <div class="js-routes" data-widgets-route="{{ path('dashboard_index_ajax') }}" data-check-web-status-route="{{ path('check_web_status') }}">
    </div>
    </section>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('js/app/dashboard/index.js') }}"></script>
{% endblock javascripts %}