<div class="row">
    <div class="col-md-12">
        <div class="box">
            {% if not title is empty %}
            <div class="box-header with-border">
                <h3 class="box-title">{{ title|trans }}</h3>
                {#
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-wrench"></i></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
                #}
            </div>
            {% endif %}
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        {{ render_widget(widgets.0) }}
                    </div>
                    {#
                    <div class="col-md-4">
                        <p class="text-center">
                            <strong>Goal Completion</strong>
                        </p>
                        <div class="progress-group">
                            <span class="progress-text">Add Products to Cart</span>
                            <span class="progress-number"><b>160</b>/200</span>

                            <div class="progress sm">
                                <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="progress-group">
                            <span class="progress-text">Complete Purchase</span>
                            <span class="progress-number"><b>310</b>/400</span>
                            <div class="progress sm">
                                <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="progress-group">
                            <span class="progress-text">Visit Premium Page</span>
                            <span class="progress-number"><b>480</b>/800</span>
                            <div class="progress sm">
                                <div class="progress-bar progress-bar-green" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="progress-group">
                            <span class="progress-text">Send Inquiries</span>
                            <span class="progress-number"><b>250</b>/500</span>
                            <div class="progress sm">
                                <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                    #}
                </div>
            </div>
            {% if widgets|length > 1 %}
            <div class="box-footer">
                <div class="row">
                    {% set width = (widgets|length) - 1 %}
                    {% set rawWidth = 12 / width %}
                    {% set columnWidth = rawWidth|round(0, 'floor') %}
                    {% for widget in widgets|slice(1, width) %}
                        {% set data = widget.data %}
                        {% if widget.option('dataType') == 'duration' %}
                            {% set data = widget.data|duration %}
                        {% elseif widget.option('dataType') == 'money' %}
                            {% set data = widget.data|money %}
                        {% endif %}
                        <div class="col-sm-{{ columnWidth }} col-xs-{{ columnWidth * 2 }}">
                            <div class="description-block border-right">
                                {#<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>#}
                                {#<span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>#}
                                {#<span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>#}
                                {#<span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>#}
                                <h5 class="description-header">{{ data }}</h5>
                                <span class="description-text">{{ widget.title|trans }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
