<div>
    <template>
        <div>
          <div v-if="loading">
            <spinner :loading="loading" :text='loadingText'/>
          </div>
          <div v-else-if="!authenticated">
            <div>Error: user must be logged in to access this page.</div>
          </div>
          <div v-else>
           <div class=""></div>
            <!--------->
            <md-card style="margin: 10px" >
                <form class="modal-content" action="" method="post" 
                  enctype="multipart/form-data" 
                  upload_type="http://www.w3.org/ns/dcat#Dataset">
                <md-steppers :md-active-step.sync="active" md-linear>
        
                  <md-step id="first" md-label="Upload files" :md-done.sync="first">  
                     <div style="margin: 20px">

                      <md-field style="max-width: 100%;"> 
                        <label>DOI of related publication (e.g., 10.1000/000)</label>
                        <md-input v-model="doi"></md-input>
                      </md-field>
        
                        <md-field style="max-width: none;" :class="{ 'md-invalid': isInvalidUpload }"> 
                          <label>Select files to upload for this dataset</label>
                          <md-file v-model="distr_upload" id="distrFiles" multiple required isInvalidValue=false
                            v-on:change="handleDistrUpload($event.target.files)"/> 
                          <span style="color: red;" v-if="distrStatus === 3">Error in upload. Please try again</span>
                          <span class="md-error" style="margin-left:40px">At least one distribution is required</span>
                        </md-field>
                        <div class="large-12 medium-12 small-12 cell" style="margin:20px">
                          <div 
                            v-for="(file, key) in uploadedFiles" 
                            v-bind:key="key + 'listing'"
                            class="file-listing">
                            <div class="md-layout" style="margin-left:10px; align-items: center;">
                              <div class="md-layout-item">{{ file.name }} </div>
                              <div class="md-layout-item">
                                <md-field style="max-width: 90%;">
                                  <label>Label</label>
                                  <md-input v-model=file.label></md-input>
                                  <md-tooltip md-delay="300">Provide a human-readable label or leave as the default</md-tooltip>
                                </md-field>
                              </div>
                              <div class="md-layout-item">
                                <md-button class="remove-file md-raised" v-on:click="removeFile( key )">Remove file</md-button> 
                              </div>
                            </div>
                          </div>
                        </div>  
              
                        <md-field style="max-width: none;">
                          <label>Select a representative image to use as thumbnail</label>
                          <md-file 
                            id="repImgUploader" v-model="rep_image" accept="image/*" 
                            v-on:change="handleImgUpload($event.target.files); previewFile()"/>
                          <span style="color: red;" v-if="depictStatus === 3">Error in upload. Please try again</span>
                        </md-field>
                        <div id="depictWrapper" style="margin-left: 40px; visibility: hidden;">
                          <figure>
                            <img id="depictImg" src="" alt="Image preview..."  style="height:200px"> 
                            <figcaption>{{ dataset.depiction.name }}</figcaption>
                          </figure> 
                          <md-button style="margin-left: 40px;" type="button" class="close md-raised" @click="removeImage()">Remove image</md-button>
                        </div>
                      </div>
                      <div class="md-layout" style="align-items: center;">
                        <div class="md-layout-item">
                          <md-button 
                            class="md-raised md-primary" 
                            @click="checkFirstPage()">
                            Upload and continue
                          </md-button> 
                        </div>
                        <div class="md-layout-item" v-if="doiLoading">
                          <md-progress-spinner :md-diameter="30" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
                        </div>
                        <div class="md-layout-item">
                        </div>
                        <div class="md-layout-item">
                        </div>
                      </div>
    
                    </md-step>
        
        
                    <md-step id="second" md-label="Provide additional info" :md-done.sync="second">
                    
                      <div class="md-layout">
        
                        <!---------- General Info fields ---------->
                        <md-content style="width: 100%; margin: 20px">
                          <div class="md-headline" style="margin-top: 10px">
                            General Information
                          </div>
                          <md-field style="max-width: 100%;" :class="{ 'md-invalid': (isInvalidForm && (dataset.title === ''))}"> 
                            <label>Title</label>
                            <md-input v-model="dataset.title" required></md-input>
                            <span class="md-error">Title required</span>
                          </md-field>


                          <div class="md-subheading" style="margin-top: 40px;">Contact Point</div> 
                          <div class="md-layout md-gutter" style="align-items: center;">  

                            <div class="md-layout-item md-size-30">
                              <md-field :class="{ 'md-invalid': (isInvalidForm && ((cpID === null) || (cpID==='')) )}" style="max-width: 100%;">
                                <label>ORCID Identifier (e.g., 0000-0001-2345-6789)</label>
                                <md-input v-model="cpID" required v-on:change="lookupOrcid()"></md-input>
                                <span class="md-error">ORCID iD required</span>
                              </md-field>
                            </div>
                      
                            <div class="md-layout-item md-size-20">
                              <md-field :class="{ 'md-invalid': (isInvalidForm && (dataset.contactpoint.cpfirstname === ''))}">
                                <label>First name</label>
                                <md-input v-model="dataset.contactpoint.cpfirstname" required></md-input>
                                <span class="md-error">Contact point required</span>
                              </md-field>
                            </div>
                      
                            <div class="md-layout-item md-size-20">
                              <md-field :class="{ 'md-invalid': (isInvalidForm && (dataset.contactpoint.cplastname === ''))}">
                                <label>Last name</label>
                                <md-input v-model="dataset.contactpoint.cplastname" required></md-input>
                                <span class="md-error">Contact point required</span>
                              </md-field>
                            </div>
                      
                            <div class="md-layout-item md-size-25">
                              <md-field :class="{ 'md-invalid': (isInvalidForm && (dataset.contactpoint.cpemail === ''))}" style="max-width: 100%;">
                                <label>Email</label>
                                <md-input v-model="dataset.contactpoint.cpemail" required></md-input>
                                <span class="md-error">Valid email required</span>
                              </md-field>
                            </div>
                          </div>

                          <div style="color: red; margin-bottom: 20px; text-align: center;" v-if="cpIDError">
                            No results found for {{cpID}}
                          </div>

                          <div style="margin-bottom: 40px; text-align: center;">
                            Don't have an ORCID iD?
                            <a href="https://orcid.org/" target="_blank">Create one here</a>
                          </div>
        
                          <md-field style="max-width: 100%;" :class="{ 'md-invalid': (isInvalidForm && (dataset.description === ''))}">
                            <label>Text Description</label>
                            <md-textarea v-model="dataset.description" required></md-textarea>
                            <span class="md-error">Description required</span>
                          </md-field>
     
                        </md-content>
                    
                        <md-divider style="border-style: solid" width="100%"></md-divider>
        
        
                        <!---------- Contributor fields -------->
                        <md-content style="width: 100%; margin: 20px">
                          <div class="md-headline" style="margin-top: 10px; margin-bottom: 10px"> 
                            Contributors
                          </div>

                          <div>  
                            <md-autocomplete
                              style="min-width: 100%;"
                              v-model="selectedAuthor" 
                              :md-options="autocomplete.availableAuthors" 
                              :md-open-on-focus="false" 
                              @md-changed="resolveEntityAuthor"
                              @md-selected="selectedAuthorChange"
                              @md-opened="setListStyle"
                              @md-closed="setListStyle(true)"
                            >
                              <label>Search for Author</label>
                  
                              <template style="width: 90% !important; left: 1px !important;" slot="md-autocomplete-item" slot-scope="{ item, term }">
                                <label style="white-space: pre-wrap" md-term="term" md-fuzzy-search="true">{{item.label}}</label>
                              </template>
                          
                              <template style="width: 90% !important; left: 1px !important" slot="md-autocomplete-empty" slot-scope="{ term }">
                                <p>No authors matching "{{ term }}" were found.</p>
                                <a v-on:click="showNewAuthor" style="cursor: pointer">Create new</a>
                              </template>
                            </md-autocomplete>

                          <table class="table" width="100%" style="border-collapse: collapse;">
                            <tbody>
                              <tr > 
                              <td style="width:100%">  
                                <tr v-for="(row, index) in contributors" 
                                  v-bind:key="index + 'contr'" 
                                  style="border-top: 0.5pt lightgray solid"
                                >
                                  <td style="width:50%">
                                    {{contributors[index]['name']}}
                                  </td>
                                  <td v-if="editableOrgs" style="width:40%">
                                    <md-autocomplete 
                                      style="max-width: 90%;" 
                                      v-model="row['onbehalfof']['name']" 
                                      :md-options="autocomplete.availableInstitutions" 
                                      :md-open-on-focus="false"
                                      @md-changed="resolveEntityInstitution"
                                      @md-selected="selectedOrgChange(index, $event)"
                                    >
                                      <label>Organization</label>
                          
                                      <template style="max-width: 90%;" slot="md-autocomplete-item" slot-scope="{ item, term }">
                                        <md-highlight-text :md-term="term">{{ item.label }}</md-highlight-text>
                                      </template>
                          
                                      <template style="max-width: 90%;" slot="md-autocomplete-empty" slot-scope="{ term }">
                                        <p>No organizations matching "{{ term }}" were found.</p>
                                        <a v-on:click="showNewInstitution" style="cursor: pointer">Create new</a> 
                                      </template>
                                    </md-autocomplete>

                                  </td>
                                  <td v-else="editableOrgs" style="width:30%"></td>
                                  <td>
                                    <a v-on:click="removeElement(index)" style="cursor: pointer" >Remove</a> 
                                  </td>
                                </tr>
                              </td> 
                              </tr>
                            </tbody>

                          </table> 
                          </div>
                        </md-content>
        
                        <md-divider style="border-style: solid" width="100%"></md-divider>
                    
                        <!-- -------- Publication Info fields -------- -->
                        <md-content style="width: 100%; margin: 20px">
                          <div class="md-headline" style="margin-top: 10px; margin-bottom: 10px">
                            Publication Information
                          </div>
                      
                          <div style="width: 100%">
                            <div class="md-layout md-gutter">
                              <div class="md-layout-item md-size-50">
                                <label>Date Published</label>
                                <md-field>
                                  <md-input v-model="dataset.datepub['@value']" type="date"
                                  :formatter="dateFormat"></md-input>
                                </md-field>
                              </div>
                      
                              <div class="md-layout-item md-size-50">
                                <label>Date Last Modified</label>
                                <md-field>
                                  <md-input v-model="dataset.datemod['@value']" type="date" 
                                  :formatter="dateFormat"></md-input>
                                </md-field>
                              </div>
                            </div>
                            
                          </div>
                        </md-content> 
                        <md-button class="md-raised md-primary" @click="checkSecondPage">Next</md-button>
                        <span v-if="isInvalidForm" class="md-error" style="color:red">Check for errors in required fields</span>
                      </div> 
                    </md-step>
        
                    <md-step id="third" md-label="Confirm and Submit" :md-done.sync="third">
        
                      <div class="md-headline" style="margin: 10px">
                        Form Results
                      </div>
                      <md-content style="width: 100%; margin: 20px">
                        <span>Title: {{ dataset.title }}</span>
                        <p>
                          Contact Point: {{ dataset.contactpoint.cpfirstname }} 
                          {{ dataset.contactpoint.cplastname }} - 
                          {{ dataset.contactpoint.cpemail }}
                        </p>
                        <p>Text Description: {{ dataset.description }}</p>
                        <span>Contributors</span>
                        <div
                          style="margin-left: 20px"
                          v-for="(elem, index) in contributors"
                          v-bind:key="index + 'resContr'"
                        >
                          <span>{{elem.name}}</span>
                          <template v-if="(elem.onbehalfof !== null)&&(elem.onbehalfof.name !== undefined)"> - {{elem.onbehalfof.name}}</template>
                        </div> 
                        
                        <p>Date Published: {{ dataset.datepub['@value'] }}</p>
                        <p>Date Last Modified: {{ dataset.datemod['@value'] }}</p>
                        <p> Related publication: </p>
                        <div style="margin-left: 20px">
                          {{ dataset.refby }}
                        </div>
                        <p style="margin-top:10px">Distribution(s):</p> 
                        <div 
                          v-for="(file, key) in uploadedFiles" 
                          v-bind:key="key+'confirm'" 
                          style="margin-left:20px;"> 
                          {{ file.name }} 
                        </div>
                        <p>Representative Image: {{ rep_image }}</p>
                      </md-content>
        
                      <md-card-actions>
                        <md-button v-on:click="submitForm" class="md-primary"
                          >Submit</md-button
                        >
                      </md-card-actions>
        
                    </md-step>
                </md-steppers>
                </form>
              </md-card>
          </div>
        </div>
      </template>
    </div>
