
    <a href="/zones/{{ zone.number}}">
        <h4 id="name_zone_{{ zone.number }}">{{ zone.name }}</h3>
    </a>
    <table>
        <tbody>
            <tr>
                <td class="icon">
                    <span class="outer_dot">
                        <span id="inner_icon_state_zone_{{ zone.number }}"></span>
                    </span>
                </td>
                <td class="property">{{ translater.getTranslation("state") }}:</td>
                <td class="value" id="state_text_zone_{{ zone.number }}"></td>
                <td>
                    <select id="duration_zone_{{ zone.number }}">
                        {% for option in zoneManager.systemSettings.webDurationOptions %}
                            <option value="{{ option }}">{{ option }} {{ translater.getTranslation("minutes") }}</option>
                        {% endfor %}
                    </select>
                    <button onclick="switchZoneStateByValueID('switch_zone_on','{{ zone.number }}', 'duration_zone_{{ zone.number }}', 60)">{{  translater.getTranslation("turn on") }}</button>
                    <button onclick="switchZoneStateByValueID('switch_zone_off','{{ zone.number }}', 'duration_zone_{{ zone.number }}', 60)">{{ translater.getTranslation("turn off") }}</button>
                </td>
            </tr>
            <tr id="end_time_row_zone_{{ zone.number }}">
                <td></td>
                <td></td>
                <td>
                    {{translater.getTranslation("until") }} <p id="end_time_zone_{{ zone.number }}" class="end_time_value"></p>
                </td>
                <td>
                    <button onclick="switchZoneState('switch_zone_off','{{ zone.number }}', -1)">{{ translater.getTranslation("cancel") }}</button>
                </td>
            </tr>
            <tr id="planed_duration_row_zone_{{ zone.number }}">
                <td></td>
                <td></td>
                <td>
                    {{translater.getTranslation("irrigation is planed.") }}<br>{{ translater.getTranslation("planed duration")}}: <p id="planed_duration_zone{{ zone.number }}" class="planed_duration_value"></p> {{ translater.getTranslation("minutes") + "." }}
                </td>
                <td>
                    <button onclick="deleteJobsForZone('delete_jobs_for_zone','{{ zone.number }}')">{{ translater.getTranslation("delete") }}</button>
                </td>
            </tr>
            <tr>
                <td class="icon">
                    <span class="outer_dot">
                        <p id="inner_icon_mode_zone_{{ zone.number }}" class="inner_icon"></p>
                    </span>
                </td>
                <td>
                    <label class="toggle">
                        <input type="checkbox" id="slider_state_zone_{{ zone.number }}" onchange="switchZoneMode(this.checked, {{ zone.number }})">
                        <span class="slider"></span>
                        <span class="labels" data-on="A" data-off="M"></span>
                    </label>
                </td>
                <td class="property">{{ translater.getTranslation("operating mode") }}:</td>
                <td id="mode_text_zone_{{ zone.number }}" class="value"></td>
            </tr>
            <tr>
                <td class="icon">
                    <span class="outer_dot">
                        <span id="inner_icon_humidity_zone_{{ zone.number }}"></span>
                    </span>
                </td>
                <td class="property">{{ translater.getTranslation("actual humidity") }}:</td>
                <td id="acutal_humidity_zone_{{ zone.number }}" class="value"></td>
            </tr>
            <tr>
                <td class="icon">
                
                </td>
                <td class="property">{{ translater.getTranslation("desired humidity") }}:</td>
                <td id="desired_humidity_zone_{{ zone.number }}" class="value"></td>
            </tr>
        </tbody>
    </table>
    <p class="zone_number">{{ zone.number }}</p>