{{!
    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 enrol_instapay/paycard

    The InstaPay payment card: amount, three steps, the receipt form.

    Example context (json):
    {"uniqid": "instapay-1", "instancename": "InstaPay", "coursename": "Programming", "amount": "299 EGP", "fullamount": "500 EGP",
     "haslink": true, "link": "#", "hashandle": true, "handle": "name@instapay", "formhtml": "<form></form>",
     "rejected": false, "reason": "", "rejectedon": ""}
}}
<div class="enrol-instapay card shadow-sm mb-4" id="{{uniqid}}">
    <div class="card-body">
        <div class="enrol-instapay-head d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <h3 class="h5 mb-1">{{instancename}}</h3>
                <div class="text-muted small">{{coursename}}</div>
            </div>
            <div class="enrol-instapay-amount" title="{{#str}}amount, enrol_instapay{{/str}}">{{amount}}{{#fullamount}}<s class="enrol-instapay-was" title="{{#str}}fullprice, enrol_instapay{{/str}}">{{fullamount}}</s>{{/fullamount}}</div>
        </div>

        {{#rejected}}
        <div class="alert alert-danger mt-3 mb-0" role="alert">
            <strong>{{#str}}rejectedtitle, enrol_instapay{{/str}}</strong>
            <div class="small text-muted mb-1">{{rejectedon}}</div>
            <div class="enrol-instapay-reason">{{{reason}}}</div>
            <div class="mt-2">{{#str}}rejectedagain, enrol_instapay{{/str}}</div>
        </div>
        {{/rejected}}

        <ol class="enrol-instapay-steps list-unstyled mt-4 mb-0">
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">1</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-2">{{#str}}step1, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-2">{{#str}}step1lead, enrol_instapay, {{amount}}{{/str}}</p>
                    {{#haslink}}
                    <a class="btn btn-primary enrol-instapay-paybtn" href="{{link}}" target="_blank" rel="noopener noreferrer">
                        {{#str}}paynow, enrol_instapay{{/str}} {{#pix}}i/externallink, core{{/pix}}
                    </a>
                    {{/haslink}}
                    {{#hashandle}}
                    <div class="enrol-instapay-handle mt-2">
                        <span class="small text-muted">{{#str}}handlelabel, enrol_instapay{{/str}}</span>
                        <code id="{{uniqid}}-handle" dir="ltr">{{handle}}</code>
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                            data-action="copytoclipboard" data-clipboard-target="#{{uniqid}}-handle"
                            data-clipboard-success-message="{{#str}}copied, enrol_instapay{{/str}}">
                            {{#str}}copy, enrol_instapay{{/str}}
                        </button>
                    </div>
                    <div class="small text-muted mt-1">{{#str}}poweredby, enrol_instapay{{/str}}</div>
                    {{/hashandle}}
                </div>
            </li>
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">2</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-2">{{#str}}step2, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-2">{{#str}}step2lead, enrol_instapay{{/str}}</p>
                    <div class="enrol-instapay-formwrap">{{{formhtml}}}</div>
                </div>
            </li>
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">3</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-1">{{#str}}step3, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-0">{{#str}}step3lead, enrol_instapay{{/str}}</p>
                </div>
            </li>
        </ol>
    </div>
</div>
{{#js}}
require(['core/copy_to_clipboard']);
// The browser's own file control names itself in the browser's language and widens with the file name,
// which pushed the card off the side of a phone. Swapping it for a button of ours keeps the card in one
// language and inside the screen. Without this script the plain input is still there and still works.
(function() {
    // The form copies the element's class onto its wrapper too, so ask for the input itself.
    var input = document.querySelector('#{{uniqid}} input[type="file"].enrol-instapay-file');
    if (!input || input.dataset.instapayReady) {
        return;
    }
    input.dataset.instapayReady = '1';
    var empty = "{{#str}}nofilechosen, enrol_instapay{{/str}}";
    var wrap = document.createElement('div');
    wrap.className = 'enrol-instapay-upload';
    input.parentNode.insertBefore(wrap, input);
    wrap.appendChild(input);

    var button = document.createElement('button');
    button.type = 'button';
    button.className = 'btn btn-outline-primary enrol-instapay-choose';
    button.textContent = "{{#str}}choosefile, enrol_instapay{{/str}}";
    var name = document.createElement('span');
    name.className = 'enrol-instapay-filename text-muted small';
    name.textContent = empty;
    wrap.appendChild(button);
    wrap.appendChild(name);

    button.addEventListener('click', function() {
        input.click();
    });
    input.addEventListener('change', function() {
        name.textContent = input.files && input.files.length ? input.files[0].name : empty;
    });
})();
{{/js}}