<div id="modal-report" ng-switch="!isNewResource || (applicationList && applicationList.length>0)">

  <div ng-switch-when="false">

    <!--Message quand aucune application n'existe dans le portail-->
    <div>
      <p>{{'tools.reports.emptyApp' | translate}}</p>
    </div>
  </div>

  <div ng-switch-when="true">

    <!--
    1 de ces 4 dropzones s'affiche en fonction
    du bouton cliqué (ajout/edit) et du type de fichier (image/rapport)
    -->
    <div class="imp_file_drop">

      <!--Ajouter image-->
      <div
          class="dropzone-container"
          complete-action="keepFileNameToSave(file.name)"
          drop-action="/services/{portalid}/report/jasper/addtemp"
          dropzone-component="dropzoneComponent"
          dropzone-title="ngDropZone.impImgJasperTitle"
          extension=".jpg,.png,.jpeg,.gif"
          max-filesize="6000"
          ng-disabled="!newResourceAppname && !newResourceType"
          ng-drop-zone
          ng-if="isNewResource && isImageResource"
          remove-action="/services/{portalid}/report/jasper/removetemp?isImage=true"
      ></div>

      <!--Ajouter rapport-->
      <div
          class="dropzone-container"
          complete-action="keepFileNameToSave(file.name)"
          drop-action="/services/{portalid}/report/jasper/addtemp"
          dropzone-component="dropzoneComponent"
          dropzone-title="ngDropZone.impJasperTitle"
          extension=".jrxml"
          max-filesize="6000"
          ng-disabled="!newResourceAppname && !newResourceType"
          ng-drop-zone
          ng-if="isNewResource && !isImageResource"
          remove-action="/services/{portalid}/report/jasper/removetemp?isImage=false"
      ></div>

      <!--Remplacer image-->
      <div
          class="dropzone-container"
          drop-action="/services/{portalid}/report/{{selected_resource.app}}/jasper/{{editListCfg.activeTab==0}}/uploadimage"
          dropzone-component="dropzoneComponent"
          dropzone-title="ngDropZone.impImgJasperTitle"
          extension=".jpg,.png,.jpeg,.gif"
          max-filesize="6000"
          ng-drop-zone
          ng-if="!isNewResource && isImageResource"
          remove-action="/services/{portalid}/report/{{selected_resource.app}}/jasper/{{editListCfg.activeTab==0}}/removeimage"
      ></div>

      <!--Remplacer report-->
      <div
          class="dropzone-container"
          drop-action="/services/{portalid}/report/{{selected_resource.app}}/jasper/add?isAction={{editListCfg.activeTab==0}}"
          dropzone-component="dropzoneComponent"
          dropzone-title="ngDropZone.impJasperTitle"
          extension=".jrxml"
          max-filesize="6000"
          ng-drop-zone
          ng-if="!isNewResource && !isImageResource"
          remove-action="/services/{portalid}/report/{{selected_resource.app}}/jasper/{{editListCfg.activeTab==0}}/removeuploaded"
      ></div>

      <!--
      Affichage au clic sur le bouton "Ajouter un(e) image/rapport"
      selection de l'application et du type
      -->
      <div class="flex-container">
        <div
            class="select-container"
            ng-if="isNewResource"
        >
          <div class="app-select-container">
            <label
                for="app-select"
                title="{{'tools.reports.app_select' | translate}}"
            >
              {{ 'tools.reports.app' | translate}}
            </label>
            <select
                id="app-select"
                ng-init="newResource.appname = applicationList[0]"
                ng-model="newResource.appname"
                ng-options="app for app in applicationList"
                title="{{'tools.reports.app_select' | translate}}"
            ></select>
          </div>
          <div class="type-select-container">
            <label
                for="type-select"
                title="{{'tools.reports.type_select' | translate}}"
            >
              {{ 'tools.reports.type' | translate}}
            </label>
            <select
                id="type-select"
                ng-init="newResource.type='action'"
                ng-model="newResource.type"
                title="{{'tools.reports.type_select' | translate}}"
            >
              <option value="action">{{'tools.reports.action' | translate}}</option>
              <option value="dashboard">{{'tools.reports.dashboard' | translate}}</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-group text-center">

        <!--Bouton ajouter-->
        <button
            class="btn btn-default btn-success"
            ng-click="saveFile()"
            ng-if="isNewResource"
            title="{{'tools.reports.save' | translate}}"
            type="button"
        >
          <translate>common.save</translate>
        </button>

        <!--Bouton mettre à jour-->
        <button
            class="btn btn-default btn-success"
            ng-click="refreshReportsList()"
            ng-if="!isNewResource"
            title="{{'tools.reports.update' | translate}}"
            type="button"
        >
          <translate>common.update</translate>
        </button>

      </div>
    </div>
  </div>
</div>
