{{#explorer-container hideSchema=hideSchema everEditing=everEditing}}
  {{#if disallow}}
    <h1>{{i18n "explorer.admins_only"}}</h1>
  {{else}}
    {{#unless selectedQueryId}}
      <div class="query-list">
        {{text-field value=search placeholderKey="explorer.search_placeholder"}}
        {{d-button
          action=(action "showCreate")
          icon="plus"
          class="no-text btn-right"
        }}
        {{pick-files-button
          class="import-btn"
          label="explorer.import.label"
          icon="upload"
          acceptedFormatsOverride=acceptedImportFileTypes
          showButton=true
          onFilesPicked=(action "import")
        }}
      </div>

      {{#if showCreate}}
        <div class="query-create">
          {{text-field
            value=newQueryName
            placeholderKey="explorer.create_placeholder"
          }}
          {{d-button
            action=(action "create")
            disabled=createDisabled
            label="explorer.create"
            icon="plus"
          }}
        </div>
      {{/if}}

      {{#if othersDirty}}
        <div class="warning">
          {{d-icon "exclamation-triangle"}}
          {{i18n "explorer.others_dirty"}}
        </div>
      {{/if}}
    {{/unless}}

    {{#if model.length}}
      {{#unless selectedItem.fake}}
        <div class="query-edit {{if editName "editing"}}">
          {{#if selectedItem}}
            {{#if editing}}
              <div class="name">
                {{d-button
                  action=(action "goHome")
                  icon="chevron-left"
                  class="previous"
                }}
                <div class="name-text-field">
                  {{text-field value=selectedItem.name}}
                </div>
              </div>

              <div class="desc">
                {{textarea
                  value=selectedItem.description
                  placeholder=(i18n "explorer.description_placeholder")
                }}
              </div>
            {{else}}
              <div class="name">
                {{d-button
                  action=(action "goHome")
                  icon="chevron-left"
                  class="previous"
                }}

                <h1>
                  {{selectedItem.name}}
                  {{#unless editDisabled}}
                    <a href {{action "editName" class="edit-query-name"}}>
                      {{d-icon "pencil-alt"}}
                    </a>
                  {{/unless}}
                </h1>
              </div>

              <div class="desc">
                {{selectedItem.description}}
              </div>
            {{/if}}

            <div class="pull-left">
              <div class="groups">
                <span class="label">{{i18n "explorer.allow_groups"}}</span>
                <span>
                  {{multi-select
                    value=selectedItem.group_ids
                    content=groupOptions
                    allowAny=false
                    onSelect=(action (mut selectedItem.group_ids))
                  }}
                </span>

                {{#if runDisabled}}
                  {{#unless editing}}
                    <span class="setting-controls">
                      {{d-button
                        class="ok"
                        action=(action "save")
                        icon="check"
                      }}
                      {{d-button
                        class="cancel"
                        action=(action "discard")
                        icon="times"
                      }}
                    </span>
                  {{/unless}}
                {{/if}}
              </div>
            </div>

            <div class="clear"></div>

            {{! the SQL editor will show the first time you }}
            {{#if everEditing}}
              <div class="query-editor {{if hideSchema "no-schema"}}">
                <div class="panels-flex">
                  <div class="editor-panel">
                    {{ace-editor content=selectedItem.sql mode="sql"}}
                  </div>

                  <div class="right-panel">
                    {{#if hideSchema}}
                      {{d-button
                        action=(action "expandSchema")
                        icon="chevron-left"
                        class="no-text unhide"
                      }}
                    {{/if}}

                    <div class="schema">
                      {{explorer-schema schema=schema hideSchema=hideSchema}}
                    </div>
                  </div>
                </div>

                <div class="grippie">
                  {{d-icon "discourse-expand"}}
                </div>

                <div class="clear"></div>
              </div>
            {{else}}
              <div class="sql">
                {{hljs-code-view value=selectedItem.sql codeClass="sql"}}
              </div>
            {{/if}}

            <div class="clear"></div>

            <div class="pull-left left-buttons">
              {{#if everEditing}}
                {{d-button
                  action=(action "save")
                  label="explorer.save"
                  disabled=saveDisable
                }}
              {{else}}
                {{#unless editDisabled}}
                  {{d-button
                    action=(action "editName")
                    label="explorer.edit"
                    icon="pencil-alt"
                  }}
                {{/unless}}
              {{/if}}

              {{d-button
                action=(action "download")
                label="explorer.export"
                disabled=runDisabled
                icon="download"
              }}

              {{#if everEditing}}
                {{d-button
                  action=(action "showHelpModal")
                  label="explorer.help.label"
                  icon="question-circle"
                }}
              {{/if}}
            </div>

            <div class="pull-right right-buttons">
              {{#if selectedItem.destroyed}}
                {{d-button
                  action=(action "recover")
                  class=""
                  icon="undo"
                  label="explorer.recover"
                }}
              {{else}}
                {{#if everEditing}}
                  {{d-button
                    action=(action "discard")
                    icon="undo"
                    label="explorer.undo"
                    disabled=saveDisabled
                  }}
                {{/if}}

                {{d-button
                  action=(action "destroy")
                  class="btn-danger"
                  icon="trash-alt"
                  label="explorer.delete"
                }}
              {{/if}}
            </div>

            <div class="clear"></div>
          {{/if}}
        </div>

        <form class="query-run" {{action "run" on="submit"}}>
          {{#if selectedItem.hasParams}}
            <div class="query-params">
              {{#each selectedItem.param_info as |pinfo|}}
                {{param-input
                  params=selectedItem.params
                  initialValues=parsedParams
                  info=pinfo
                }}
              {{/each}}
            </div>
          {{/if}}

          {{#if runDisabled}}
            {{#if saveDisabled}}
              {{d-button
                label="explorer.run"
                disabled="true"
                class="btn-primary"
              }}
            {{else}}
              {{d-button
                action=(action "saverun")
                icon="play"
                label="explorer.saverun"
                class="btn-primary"
              }}
            {{/if}}
          {{else}}
            {{d-button
              action=(action "run")
              icon="play"
              label="explorer.run"
              disabled=runDisabled
              class="btn-primary"
              type="submit"
            }}
          {{/if}}

          <label class="query-plan">
            {{input type="checkbox" checked=explain name="explain"}}
            {{i18n "explorer.explain_label"}}
          </label>
        </form>

        <hr>
      {{/unless}}

      {{conditional-loading-spinner condition=loading}}

      {{#unless selectedItem.fake}}
        {{#if results}}
          <div class="query-results">
            {{#if showResults}}
              {{query-result query=selectedItem content=results}}
            {{else}}
              {{#each results.errors as |err|}}
                <pre class="query-error"><code>{{~err}}</code></pre>
              {{/each}}
            {{/if}}
          </div>
        {{/if}}
      {{/unless}}

      {{#if showRecentQueries}}
        <div class="container">
          <table class="recent-queries">
            <thead class="heading-container">
              <th class="col heading name">
                <div
                  role="button"
                  class="heading-toggle"
                  {{action "sortByProperty" "name"}}
                >
                  {{table-header-toggle
                    field="name"
                    labelKey="explorer.query_name"
                    order=order
                    asc=asc
                    automatic=true
                  }}
                </div>
              </th>
              <th class="col heading created-by">
                <div
                  role="button"
                  class="heading-toggle"
                  {{action "sortByProperty" "username"}}
                >
                  {{table-header-toggle
                    field="username"
                    labelKey="explorer.query_user"
                    order=order
                    asc=asc
                    automatic=true
                  }}
                </div>
              </th>
              <th class="col heading group-names">
                <div class="group-names-header">
                  {{i18n "explorer.query_groups"}}
                </div>
              </th>
              <th class="col heading created-at">
                <div
                  role="button"
                  class="heading-toggle"
                  {{action "sortByProperty" "last_run_at"}}
                >
                  {{table-header-toggle
                    field="last_run_at"
                    labelKey="explorer.query_time"
                    order=order
                    asc=asc
                    automatic=true
                  }}
                </div>
              </th>
            </thead>
            <tbody>
              {{#each filteredContent as |query|}}
                <tr class="query-row">
                  <td>
                    <a
                      {{action "scrollTop"}}
                      href="/admin/plugins/explorer/?id={{query.id}}"
                    >
                      <b class="query-name">{{query.name}}</b>
                      <medium class="query-desc">{{query.description}}</medium>
                    </a>
                  </td>
                  <td class="query-created-by">
                    {{#if query.username}}
                      <a href="/u/{{query.username}}/activity">
                        <medium>{{query.username}}</medium>
                      </a>
                    {{/if}}
                  </td>
                  <td class="query-group-names">
                    {{#each query.group_names as |group|}}
                      {{share-report group=group query=query}}
                    {{/each}}
                  </td>
                  <td class="query-created-at">
                    {{#if query.last_run_at}}
                      <medium>
                        {{bound-date query.last_run_at}}
                      </medium>
                    {{else if query.created_at}}
                      <medium>
                        {{bound-date query.created_at}}
                      </medium>
                    {{/if}}
                  </td>
                </tr>
              {{else}}
                <br>
                <em class="no-search-results">
                  {{i18n "explorer.no_search_results"}}
                </em>
              {{/each}}
            </tbody>
          </table>
        </div>
      {{/if}}

      <div class="explorer-pad-bottom"></div>
    {{/if}}
  {{/if}}
{{/explorer-container}}