{{!
    This file is part of Moodle - https://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 mod_certificatebeautiful/form_components

    Example context (json):
    {
      "itens": [
        {
          "classstitle": "Item 1",
          "structuresitens": [
            {
              "key": "Chave 1",
              "label": "Label 1"
            }
          ]
        }
      ]
    }
}}

<div class="structuresitens">
    <h3>{{#str}}help_base_title,certificatebeautiful{{/str}}</h3>
    {{#itens}}
        <fieldset>
            <legend>{{{classstitle}}}</legend>

            <table class="table-striped table-hover">
                {{#structuresitens}}
                    <tr>
                        <th>{{{key}}}</th>
                        <td>{{{label}}}</td>
                    </tr>
                {{/structuresitens}}
            </table>
        </fieldset>
    {{/itens}}
    <div class="read-more" style="display: none">
        <a href="#">{{#str}}viewmore{{/str}}</a>
    </div>
</div>

{{#js}}
    require(["jquery"], function($) {
        $(".structuresitens .read-more").show(200).click(function() {
            event.preventDefault();

            $(".structuresitens").css({height: "auto"});
            $(".structuresitens .read-more").hide();
            return false;
        });

        $(".structuresitens th").click(function() {
            var $element = $(event.target);
            var id = "animate-" + Math.random().toString(16).slice(2);

            $element.attr("id", id);
            copyToClipboard(id);
        });

        function copyToClipboard(elementId) {
            var copyText = document.getElementById(elementId);
            navigator.clipboard.writeText(copyText.innerText);

            var $message = $("<span>{{#str}}textcopiedtoclipboard{{/str}}</span>");
            $("#" + elementId).append($message);
            setTimeout(function() {
                $message.addClass("delete");
            }, 2);
            setTimeout(function() {
                $message.remove();
            }, 2000);
        }
    });
{{/js}}
