{#
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
#}

{% extends base_template %}
{% from 'appbuilder/loading_dots.html' import loading_dots %}

{% block page_title %}
  {% if search_query %}"{{ search_query }}" - {% endif %}{{ i18n('dags') }} - {{ appbuilder.app_name }}
{% endblock %}

{% block head_meta %}
  {{ super() }}
  <meta name="dags_index" content="{{ url_for('Airflow.index') }}">
  <meta name="paused_url" content="{{ url_for('Airflow.paused') }}">
  <meta name="status_filter" content="{{ status_filter }}">
  <meta name="autocomplete_url" content="{{ url_for('DagModelView.autocomplete') }}">
  <meta name="graph_url" content="{{ url_for('Airflow.graph') }}">
  <meta name="dag_run_url" content="{{ url_for('DagRunModelView.list') }}">
  <meta name="task_instance_url" content="{{ url_for('TaskInstanceModelView.list') }}">
  <meta name="blocked_url" content="{{ url_for('Airflow.blocked') }}">
  <meta name="csrf_token" content="{{ csrf_token() }}">
  <meta name="last_dag_runs_url" content="{{ url_for('Airflow.last_dagruns') }}">
  <meta name="dag_stats_url" content="{{ url_for('Airflow.dag_stats') }}">
  <meta name="task_stats_url" content="{{ url_for('Airflow.task_stats') }}">
{% endblock %}

{% block head_css %}
  {{ super() }}
  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('switch.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ url_for_asset('dags.css') }}">
{% endblock %}

{% block content %}
<!--  <h2>{{ page_title }}</h2>-->
  <div id="main_content">
    <div class="dags-table-wrap">
      <div class="row dags-table-header">
        <div class="col-md-12">
          <div class="dags-filter-bar">
            <div class="filter-group">
              <div class="btn-group">
                <a href="{{ url_for('Airflow.index', status='all', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'all' else 'btn-default'}}" title="{{ i18n('all') }}">{{ i18n('all') }} <span class="badge">{{ "{:,}".format(status_count_all) }}</span></a>
                <a href="{{ url_for('Airflow.index', status='active', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'active' else 'btn-default'}}" title="{{ i18n('active') }}">{{ i18n('active') }} <span class="badge">{{ "{:,}".format(status_count_active) }}</span></a>
                <a href="{{ url_for('Airflow.index', status='paused', search=request.args.get('search', None), tags=request.args.getlist('tags', None)) }}" class="btn {{'btn-primary' if status_filter == 'paused' else 'btn-default'}}" title="{{ i18n('paused') }}">{{ i18n('paused') }} <span class="badge">{{ "{:,}".format(status_count_paused) }}</span></a>
              </div>
            </div>
            <div class="filter-group">
              <form id="tags_form">
                <div class="form-group search-input">
                  <select multiple name="tags" id="tags_filter" class="select2-drop-mask">
                    {% for tag in tags %}
                      <option value="{{ tag.name }}" {% if tag.selected %}selected{% endif %}>{{ tag.name }}</option>
                    {% endfor %}
                  </select>
                  {% if tags_filter|length > 0 %}
                    <button type="reset" aria-label="{{ i18n('clear_all_tags') }}" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
                  {% endif %}
                </div>
              </form>
            </div>
            <div class="filter-group filter-group-right">
              <div class="btn-group auto-refresh-group">
                <button type="button" id="auto-refresh-toggle" class="btn btn-default" title="自动刷新状态">
                  <span class="material-icons" style="font-size: 18px;">sync</span>
                </button>
              </div>
              <div class="btn-group view-mode-group">
                <button type="button" id="view-mode-table" class="btn btn-default active" title="表格视图">
                  <span class="material-icons" style="font-size: 18px;">table_rows</span>
                </button>
                <button type="button" id="view-mode-card" class="btn btn-default" title="卡片视图">
                  <span class="material-icons" style="font-size: 18px;">grid_view</span>
                </button>
              </div>
              <form id="search_form">
                <div class="form-group search-input">
                  <label for="dag_query" class="sr-only">{{ i18n('search') }} DAG</label>
                  <input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" value="{{search_query}}" autocomplete="off" placeholder="{{ i18n('search') }} DAG">
                  {% if search_query %}
                    <button type="reset" aria-label="{{ i18n('clear_dag_search') }}" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>
                  {% endif %}
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="dags-table-body" id="dags-table-view">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th width="12">
                <span class="material-icons text-muted js-tooltip" title="{{ i18n('pause_unpause_tooltip') }}">info</span>
              </th>
              <th>
                <span id="dag-display-label">{{ i18n('dag_id_label') }}</span>
                <button type="button" id="toggle-dag-display" class="btn btn-xs btn-default" title="{{ i18n('toggle_dag_display_tooltip') }}">
                  <span class="material-icons" style="font-size: 14px;">swap_horiz</span>
                </button>
              </th>
              <th>{{ i18n('owner') }}</th>
              <th>{{ i18n('dag_runs') }}
                <span class="material-icons text-muted js-tooltip" aria-hidden="true" title="{{ i18n('status') }}">info</span>
              </th>
              <th>{{ i18n('schedule') }}</th>
              <th style="width:180px;">{{ i18n('last_run') }}
                <span class="material-icons text-muted js-tooltip" aria-hidden="true" title="{{ i18n('execution_date') }}">info</span>
              </th>
              <th>{{ i18n('tasks') }}
                <span class="material-icons text-muted js-tooltip" aria-hidden="true" title="{{ i18n('status') }}">info</span>
              </th>
              <th class="text-center" style="width:110px;">{{ i18n('actions') }}</th>
              <th style="width:52px;">{{ i18n('links') }}</th>
            </tr>
          </thead>
          <tbody>
              {% if dags|length == 0 %}
              <tr><td colspan="9">{{ i18n('no_results') }}</td></tr>
            {% endif %}
            {% for dag in dags %}
              <tr>
                {# Column 1: Turn dag on/off #}
                <td style="padding-right:0;">
                  {% if dag.can_edit %}
                    {% set switch_tooltip = i18n('pause_unpause') %}
                  {% else %}
                    {% set switch_tooltip = i18n('dag_is_paused') if dag.is_paused else i18n('dag_is_active') %}
                  {% endif %}
                  <label class="switch-label{{' disabled' if not dag.can_edit else ''  }} js-tooltip" title="{{ switch_tooltip }}">
                    <input class="switch-input"  id="toggle-{{ dag.dag_id }}" data-dag-id="{{ dag.dag_id }}" type="checkbox"
                           {{ " checked" if not dag.is_paused else "" }}
                           {{ " disabled" if not dag.can_edit else "" }}>
                    <span class="switch" aria-hidden="true"></span>
                  </label>
                </td>
                {# Column 2: Name #}
                <td>
                  <a href="{{ url_for('Airflow.'+ dag.get_default_view(), dag_id=dag.dag_id) }}"
                     title="{{ dag.description[0:80] + '…' if dag.description and dag.description|length > 80 else dag.description|default('', true) }}">
                    <strong class="dag-display-id">{{ dag.dag_id }}</strong>
                    <strong class="dag-display-desc" style="display: none;">{{ dag.description|default(dag.dag_id, true) }}</strong>
                  </a>
                  <div>
                    {% for tag in dag.tags | sort(attribute='name') %}
                      <a class="label label-info"
                         href="?tags={{ tag.name }}"
                         style="margin: 6px 6px 0 0;">
                         {{ tag.name }}
                      </a>
                    {% endfor %}
                  </div>
                </td>
                {# Column 3: Dag Owners #}
                <td>
                  {% for owner in dag.owners.split(",") %}
                  <a class="label label-default"
                     href="?search={{ owner | trim }}"
                     style="margin: 3px 6px 3px 0;">
                     {{ owner | trim }}
                  </a>
                  {% endfor %}
                </td>
                {# Column 4: Dag Runs #}
                <td style="padding:0; width:120px;">
                  {{ loading_dots(classes='js-loading-dag-stats text-muted') }}
                  <svg height="10" width="10" id="dag-run-{{ dag.safe_dag_id }}" style="display: block;"></svg>
                </td>
                {# Column 5: Dag Schedule #}
                <td>
                  <a class="label label-default schedule" href="{{ url_for('DagRunModelView.list') }}?_flt_3_dag_id={{ dag.dag_id }}" data-dag-id="{{ dag.dag_id }}">
                    {{ dag.schedule_interval }}
                  </a>
                </td>
                {# Column 6: Last Run #}
                <td id="last-run-{{ dag.safe_dag_id }}" class="text-nowrap latest_dag_run">
                  {{ loading_dots(classes='js-loading-last-run text-muted') }}
                  <a></a>
                  <span aria-hidden="true" title=" " class="material-icons text-muted js-tooltip" style="display:none">info</span>
                </td>
                {# Column 7: Recent Tasks #}
                <td style="padding:0; width:323px; height:10px;">
                  {{ loading_dots(classes='js-loading-task-stats text-muted') }}
                  <svg height="10" width="10" id='task-run-{{ dag.safe_dag_id }}' style="display: block;"></svg>
                </td>
                {# Column 8: Actions #}
                <td class="text-center">
                  <div class="btn-group">
                    {% if dag %}
                    <div class="dropdown">
                      <a aria-label="{{ i18n('trigger_dag_tooltip') }}" class="btn btn-default btn-icon-only{{ ' disabled' if not dag.can_trigger }} trigger-dropdown-btn" data-toggle="dropdown">
                        <span class="material-icons" aria-hidden="true">play_arrow</span>
                      </a>
                      <ul class="dropdown-menu trigger-dropdown-menu">
                        <li>
                          <form method="POST" action="{{ url_for('Airflow.trigger') }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" name="dag_id" value="{{ dag.dag_id }}">
                            <button type="submit" class="dropdown-form-btn">{{ i18n('trigger_dag') }}</button>
                          </form>
                        </li>
                        <li><a href="{{ url_for('Airflow.trigger', dag_id=dag.dag_id) }}">{{ i18n('trigger_dag_config') }}</a></li>
                      </ul>
                    </div>
                      <a href="{{ url_for('Airflow.refresh', dag_id=dag.dag_id) }}" onclick="postAsForm(this.href); return false" title="{{ i18n('refresh_dag_tooltip') }}" aria-label="{{ i18n('refresh_dag_tooltip') }}" class="btn btn-sm btn-default btn-icon-only {{ ' disabled' if not dag.can_edit }}">
                        <span class="material-icons" aria-hidden="true">refresh</span>
                      </a>
                    {% endif %}
                    {# Use dag_id instead of dag.dag_id, because the DAG might not exist in the webserver's DagBag #}
                    <a href="{{ url_for('Airflow.delete', dag_id=dag.dag_id) }}" onclick="return confirmDeleteDag(this, '{{ dag.dag_id }}')" title="{{ i18n('delete_dag_tooltip') }}" aria-label="{{ i18n('delete_dag_tooltip') }}" class="btn btn-sm btn-default btn-icon-only {{ ' disabled' if not dag.can_delete }}">
                      <span class="material-icons text-danger" aria-hidden="true">delete_outline</span>
                    </a>
                  </div>
                </td>
                {# Column 9: Links #}
                <td class="dags-table-more">
                  {% if dag %}
                    <div class="dags-table-more__menu">
                      <div class="dags-table-more__links">
                        <a href="{{ url_for('Airflow.code', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">code</span>
                          {{ i18n('code_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.dag_details', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">details</span>
                          {{ i18n('details_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.gantt', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">vertical_distribute</span>
                          {{ i18n('gantt_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.landing_times', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">flight_land</span>
                          {{ i18n('landing_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.tries', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">repeat</span>
                          {{ i18n('tries_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.duration', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">hourglass_bottom</span>
                          {{ i18n('duration_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.calendar', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">event</span>
                          {{ i18n('calendar_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.graph', dag_id=dag.dag_id) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">account_tree</span>
                          {{ i18n('graph_link') }}
                        </a>
                        <a href="{{ url_for('Airflow.tree', dag_id=dag.dag_id, num_runs=num_runs) }}" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">nature</span>
                          {{ i18n('tree_link') }}
                        </a>
                        <a href="javascript: window.open('{{ p_url }}/etl/dag_editor?name={{dag.dag_id }}','dageditor','toolbar=no,scrollbar=no,top=200,left=200,width=800,height=400')" class="dags-table-more__link">
                          <span class="material-icons" aria-hidden="true">edit</span>
                          {{ i18n('edit_link') }}
                        </a>
                      </div>
                      <span class="dags-table-more__toggle"><span class="material-icons">more_horiz</span></span>
                    </div>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {# 卡片视图 #}
      <div class="dags-card-body" id="dags-card-view" style="display: none;">
        <div class="row">
          {% for dag in dags %}
            <div class="col-md-4 col-sm-6 dag-card-item">
              <div class="dag-card {{ 'dag-card-paused' if dag.is_paused else 'dag-card-active' }}">
                <div class="dag-card-header">
                  <div class="dag-card-status">
                    <label class="switch-label{{' disabled' if not dag.can_edit else '' }} js-tooltip" title="{{ i18n('dag_is_paused') if dag.is_paused else i18n('dag_is_active') }}">
                      <input class="switch-input" id="toggle-card-{{ dag.dag_id }}" data-dag-id="{{ dag.dag_id }}" type="checkbox"
                             {{ " checked" if not dag.is_paused else "" }}
                             {{ " disabled" if not dag.can_edit else "" }}>
                      <span class="switch" aria-hidden="true"></span>
                    </label>
                  </div>
                  <div class="dag-card-actions">
                    <div class="btn-group">
                      <a aria-label="{{ i18n('trigger_dag_tooltip') }}" class="btn btn-xs btn-default{{ ' disabled' if not dag.can_trigger }}" href="{{ url_for('Airflow.trigger', dag_id=dag.dag_id) }}">
                        <span class="material-icons" style="font-size: 16px;">play_arrow</span>
                      </a>
                      <a href="{{ url_for('Airflow.refresh', dag_id=dag.dag_id) }}" onclick="postAsForm(this.href); return false" class="btn btn-xs btn-default {{ ' disabled' if not dag.can_edit }}">
                        <span class="material-icons" style="font-size: 16px;">refresh</span>
                      </a>
                      <a href="{{ url_for('Airflow.delete', dag_id=dag.dag_id) }}" onclick="return confirmDeleteDag(this, '{{ dag.dag_id }}')" class="btn btn-xs btn-default {{ ' disabled' if not dag.can_delete }}">
                        <span class="material-icons text-danger" style="font-size: 16px;">delete_outline</span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="dag-card-body">
                  <h4 class="dag-card-title">
                    <a href="{{ url_for('Airflow.'+ dag.get_default_view(), dag_id=dag.dag_id) }}">
                      {{ dag.dag_id }}
                    </a>
                  </h4>
                  <p class="dag-card-desc">{{ dag.description|default('暂无描述', true) }}</p>
                  <div class="dag-card-meta">
                    <span class="dag-card-schedule">
                      <span class="material-icons" style="font-size: 14px;">schedule</span>
                      {{ dag.schedule_interval }}
                    </span>
                    <span class="dag-card-owner">
                      <span class="material-icons" style="font-size: 14px;">person</span>
                      {{ dag.owners.split(',')[0] }}{% if dag.owners.split(',')|length > 1 %}+{% endif %}
                    </span>
                  </div>
                  <div class="dag-card-tags">
                    {% for tag in dag.tags | sort(attribute='name') %}
                      <a class="label label-info" href="?tags={{ tag.name }}">{{ tag.name }}</a>
                    {% endfor %}
                  </div>
                </div>
                <div class="dag-card-footer">
                  <div class="dag-card-stats">
                    <span class="dag-card-status-text" id="dag-status-text-{{ dag.safe_dag_id }}">加载中...</span>
                    {{ loading_dots(classes='js-loading-dag-stats text-muted') }}
                    <svg height="10" width="10" id="dag-run-card-{{ dag.safe_dag_id }}" style="display: block;"></svg>
                  </div>
                  <div class="dag-card-links">
                    <a href="{{ url_for('Airflow.tree', dag_id=dag.dag_id, num_runs=num_runs) }}" title="{{ i18n('tree_link') }}">
                      <span class="material-icons">nature</span>
                    </a>
                    <a href="{{ url_for('Airflow.graph', dag_id=dag.dag_id) }}" title="{{ i18n('graph_link') }}">
                      <span class="material-icons">account_tree</span>
                    </a>
                    <a href="{{ url_for('Airflow.code', dag_id=dag.dag_id) }}" title="{{ i18n('code_link') }}">
                      <span class="material-icons">code</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        {{paging}}
      </div>
      <div class="col-sm-6 text-right">
        {{ i18n('showing') }} <strong>{{num_dag_from}}-{{num_dag_to}}</strong> {{ i18n('of') }} <strong>{{num_of_all_dags}}</strong> DAGs
      </div>
    </div>
  </div>
  <div id="svg-tooltip" class="tooltip top" style="position: fixed; display: none; opacity: 1; pointer-events: none;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
  </div>
{% endblock %}

{% block tail %}
  {{ super() }}
  <script>
    // DAG 列表切换功能翻译
    window.i18nStrings = {
      ...window.i18nStrings,
      dag_id_label: '{{ i18n('dag_id_label') }}',
      dag_desc_label: '{{ i18n('dag_desc_label') }}',
    };
  </script>
  <script src="{{ url_for_asset('d3.min.js') }}"></script>
  <script src="{{ url_for_asset('dags.js') }}"></script>
  <script>
    const STATE_COLOR = {{ state_color|tojson }};
    // Tests rely on confirmDeleteDag to be in the html
    function confirmDeleteDag(link, dagId) {
      if (confirm(`{{ i18n('confirm_delete_dag') }} '${dagId}'?\n\
        {{ i18n('delete_dag_warning') }}`)) {
        postAsForm(link.href, {});
      }
      return false;
    }
  </script>
{% endblock %}