{% include "header.html" %}
<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/dashboard.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/scrollingTable.css') }}">

    <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>

    <style>
        @media screen and (min-width: 2051px){
            #zones{
                grid-template-rows: repeat( {{ (zoneManager.zones|length / 3) + 1  }} , minmax(150px, auto));
            }
        }
        @media screen and (max-width: 2050px) and (min-width: 1351px){
            #zones{
                grid-template-rows: repeat( {{ (zoneManager.zones|length / 2) + 1  }} , minmax(150px, auto));
            }
        }
        @media screen and (max-width: 1350px){
            #zones{
                grid-template-rows: repeat( {{ zoneManager.zones|length }} , minmax(150px, auto));
            }
        }

    </style>

    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
    <script>
        function refreshContent() {
            executeAction('get_dashboard_pipeline_html', '0', '0', refreshPipeline);
            {% for zone in zoneManager.zones %}
                executeAction('get_zone_info', {{ zone.number }}, '0', refreshZone);
            {% endfor %}
        }
    </script>

</head>
<body>


    <main>
     
        <h2>{{ translater.getTranslation("Dashboard") }}</h2>

        
        <div id="pipeline" class="scrollingtable">
            <div>
                <div>
                    <table>
                        <caption>{{ translater.getTranslation("planed irrigationjobs") }}</caption>
                        <thead>
                            <tr>
                                <th><div label="Nr."></div></th>
                                <th><div label="{{ translater.getTranslation("Zone") }}"></div></th>
                                <th><div label="{{ translater.getTranslation("planed duration") }}"></div></th>
                                <th><div label="{{ translater.getTranslation("delete") }}"></div></th>
                                <th class="scrollbarhead"></th> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
                            </tr>
                        </thead>
                        <tbody id="jobListBody">
                            {% include "dashboard/pipeline.html" %}
                        </tbody>
                    </table>
                </div>
                Text unter Table
            </div>
        </div>
        


        <h3>{{ translater.getTranslation("irrigation zones") }}</h3>
        <div id="zones">
            {% for zone in zoneManager.zones %}
                <div id="zone_{{ zone.number }}" class="zone">
                    {% include "dashboard/zone.html" %}
                </div>

            {% endfor %}


    
        </div>

    </main>
    <p><br><br></p>

</body>
</html>

{% include "footer.html" %}