{% load i18n %}

<div id="tab-graphs" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-graphs">
    <div class="card-body">
        <ul class="nav nav-pills mb-3">
            {% translate "FATs by ship type" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=True tab_id="fatsbyship" tab_title=tab_title %}

            {% translate "Corporation performance" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=False tab_id="avgfats" tab_title=tab_title %}

            {% translate "FATs by time" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=False tab_id="fatsbytime" tab_title=tab_title %}

            {% translate "FATs by weekday" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=False tab_id="fatsbyweek" tab_title=tab_title %}
        </ul>

        <div class="tab-content">
            <div id="tab-fatsbyship" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-fatsbyship">
                <div class="card-body">
                    <h4>{% translate "FATs by ship type" %}</h4>

                    <canvas id="ship-pie" width="800" height="500"></canvas>

                    <script>
                        const chartInfo = [];

                        chartInfo.push({
                            element: document.getElementById("ship-pie"), // Element to render the chart
                            type: 'pie', // Chart type
                            data: { // Chart data
                                datasets: [
                                    {
                                        label: '{% translate "Ship Types" %}',
                                        data: {{ data_ship_type.1|safe }},
                                    }
                                ],
                                labels: {{ data_ship_type.0|safe }}
                            },
                            options: { // Chart options
                                responsive: false
                            }
                        });
                    </script>
                </div>
            </div>

            <div id="tab-avgfats" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-avgfats">
                <div class="card-body">
                    <h4>{% translate "Average FATs by corporation" %}</h4>

                    <canvas id="avgs" width="1000" height="700"></canvas>

                    <script>
                        chartInfo.push({
                            element: document.getElementById("avgs"), // Element to render the chart
                            type: 'bar', // Chart type
                            data: { // Chart data
                                datasets: [
                                    {
                                        label: '{% translate "Average # of FATs" %}',
                                        data: {{ data_avgs.1 }},
                                    }
                                ],
                                labels: {{ data_avgs.0|safe }}
                            },
                            options: { // Chart options
                                responsive: true,
                                indexAxis: 'y'
                            }
                        });
                    </script>
                </div>
            </div>

            <div id="tab-fatsbytime" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-fatsbytime">
                <div class="card-body">
                    <h4>{% translate "FATs by time" %}</h4>

                    <canvas id="time-line" width="800" height="250vh"></canvas>

                    <script>
                        chartInfo.push({
                            element: document.getElementById("time-line"), // Element to render the chart
                            type: 'line', // Chart type
                            data: { // Chart data
                                datasets: [
                                    {
                                        label: '{% translate "# of FATs" %}',
                                        data: {{ data_time.1 }},
                                    }
                                ],
                                labels: {{ data_time.0|safe }}
                            },
                            options: { // Chart options
                                responsive: true
                            }
                        });
                    </script>
                </div>
            </div>

            <div id="tab-fatsbyweek" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-fatsbyweek">
                <div class="card-body">
                    <h4>{% translate "FATs by weekday" %}</h4>

                    <canvas id="weekday-line" width="800" height="250vh"></canvas>

                    <script>
                        chartInfo.push({
                            element: document.getElementById("weekday-line"), // Element to render the chart
                            type: 'bar', // Chart type
                            data: { // Chart data
                                datasets: [
                                    {
                                        label: '{% translate "# of FATs" %}',
                                        data: {{ data_weekday.1 }},
                                    }
                                ],
                                labels: {{ data_weekday.0|safe }}
                            },
                            options: { // Chart options
                                responsive: true
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
