{{!
This file is part of Moodle - http://moodle.org/

Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template local_deepler/glossary_uploader
    provides a basic alert when connection to the api failed
      Classes required for JS: none

  Data attributes required for JS:
  * none

  Context variables required for this template:
  * glossaryupload
  * formaction
  * sesskey
  * redirect
  * glossaryuploadbtn
  * glossaryhelpmodaltitle
  * glossaryexplcol1
  * glossaryexplcol2
  * glossaryexplcol3
  * glossarydeepllink
  * close
  * fileaccept


  Example context (json):
  {
    "glossaryupload": "Title",
    "formaction": "http://moodle.test/",
    "sesskey": "1276482374",
    "redirect": "admin",
    "glossaryuploadbtn": "Upload",
    "glossaryhelpmodaltitle": "Help",
    "glossaryexplcol1": "Some markdown",
    "glossaryexplcol2": "Some markdown",
    "glossaryexplcol3": "Some markdown",
    "glossarydeepllink": "Deepl glossary help",
    "fileaccept" :".csv,.tsv,.xlsx,.xls,.ods"
  }
}}
<div class="glossary-upload">
    <h3>{{glossaryupload}} <i class="fas fa-question-circle"
                              data-bs-toggle="modal"
                              data-toggle="modal"
                              data-bs-target="#helpModal"
                              data-target="#helpModal"
                              style="cursor: pointer;"></i>
    </h3>
    <form method="post" enctype="multipart/form-data" action="{{formaction}}">
        <input type="hidden" name="uploadinglossary" value="true" class="form-control">
        <input type="hidden" name="sesskey" value="{{sesskey}}" class="form-control">
        <input type="hidden" name="redirect" value="{{redirect}}" class="form-control">
        <div class="form-row">
            <div class="col">
                <input type="file"
                       id="local_deepler/fileElem"
                       name="glossaryfile"
                       accept="{{fileaccept}}"
                       class="form-control"
                       required>
                <small class="form-text text-muted">
                    {{#str}} glossary:upload:file:supported, local_deepler {{/str}}
                </small>

            </div>
            <div class="col">
                <span class="form-control-plaintext invisible" id="local_deepler/filename-display" ><i class="fas fa-check text-success"></i></span>
            </div>
        </div>
        <div class="form-row p-2">
            <button class="btn btn-primary invisible" id="local_deepler/createglossary">{{glossaryuploadbtn}}</button>
        </div>
    </form>
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="helpModalLabel">{{glossaryhelpmodaltitle}}</h5>
                <button type="button" class="btn btn-close close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">&times;</button>
            </div>

            <div class="modal-body">
                <div class="d-flex flex-row mb-3">
                    <div class="p-2 flex-fill">{{{glossaryexplcol1}}}</div>
                </div>
                <div class="d-flex flex-row mb-3">

                    <div class="p-2 flex-fill">{{{glossaryexplcol2}}}</div>
                    <div class="p-2 flex-fill">{{{glossaryexplcol3}}}</div>
                </div>
                <div class="p-2 ">
                    <a href="https://developers.deepl.com/api-reference/glossaries"
                    target="_blank">{{{glossarydeepllink}}}</a>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">{{close}}</button>
            </div>
        </div>
    </div>
</div>
