{{!
    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 core_reportbuilder/local/audience/form

    Template for an audience form

    Example context (json):
    {
        "instanceid": 1,
        "classname": "some\\class\\name",
        "heading": "Title",
        "headingeditable": "Title (edit me)",
        "showormessage": 1,
        "canedit": 1,
        "candelete": 1,
        "description": "description",
        "form": "form"
    }
}}
<div class="instance-card" data-instanceid="{{instanceid}}" data-title="{{heading}}" data-region="audience-card">
    {{#showormessage}}
        <span class="audience-separator d-flex mb-3 justify-content-center align-items-center small text-muted font-weight-bold">
            {{#str}} or, core_reportbuilder {{/str}}
        </span>
    {{/showormessage}}
    <div class="mb-3 card">
        <div class="card-header p-0">
            <div class="mb-0 d-flex">
                <h4 class="text-left m-0 align-self-center pl-3" data-region="audience-heading">
                    {{{headingeditable}}}
                </h4>
                <span class="ml-auto">
                    {{#canedit}}
                        <button class="p-2 btn btn-secondary"
                                data-action="edit-audience"
                                title="{{#str}} editaudience, core_reportbuilder, {{heading}} {{/str}}"
                                aria-label="{{#str}} editaudience, core_reportbuilder, {{heading}} {{/str}}"
                                {{^description}}disabled{{/description}}>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.62117 14.9627L6.72197 15.1351C7.53458 15.2623 8.11491 16.0066 8.05506 16.8451L7.97396 17.9816C7.95034 18.3127 8.12672 18.6244 8.41885 18.7686L9.23303 19.1697C9.52516 19.3139 9.87399 19.2599 10.1126 19.0352L10.9307 18.262C11.5339 17.6917 12.4646 17.6917 13.0685 18.262L13.8866 19.0352C14.1252 19.2608 14.4733 19.3139 14.7662 19.1697L15.5819 18.7678C15.8733 18.6244 16.0489 18.3135 16.0253 17.9833L15.9441 16.8451C15.8843 16.0066 16.4646 15.2623 17.2772 15.1351L18.378 14.9627C18.6985 14.9128 18.9568 14.6671 19.0292 14.3433L19.23 13.4428C19.3025 13.119 19.1741 12.7831 18.9064 12.5962L17.9875 11.9526C17.3095 11.4774 17.1024 10.5495 17.5119 9.82051L18.067 8.83299C18.2284 8.54543 18.2017 8.18538 17.9993 7.92602L17.4363 7.2035C17.2339 6.94413 16.8969 6.83701 16.5867 6.93447L15.5221 7.26794C14.7355 7.51441 13.8969 7.1012 13.5945 6.31908L13.1866 5.26148C13.0669 4.95218 12.7748 4.7492 12.4496 4.75L11.5472 4.75242C11.222 4.75322 10.9307 4.95782 10.8126 5.26793L10.4149 6.31344C10.1157 7.1004 9.27319 7.51683 8.4842 7.26874L7.37553 6.92078C7.0645 6.82251 6.72591 6.93044 6.52355 7.19142L5.96448 7.91474C5.76212 8.17652 5.73771 8.53738 5.90228 8.82493L6.47 9.81487C6.88812 10.5446 6.68339 11.4814 6.00149 11.9591L5.0936 12.5954C4.82588 12.7831 4.69754 13.119 4.76998 13.442L4.97077 14.3425C5.04242 14.6671 5.30069 14.9128 5.62117 14.9627Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M13.5911 10.4089C14.4696 11.2875 14.4696 12.7125 13.5911 13.5911C12.7125 14.4696 11.2875 14.4696 10.4089 13.5911C9.53036 12.7125 9.53036 11.2875 10.4089 10.4089C11.2875 9.53036 12.7125 9.53036 13.5911 10.4089Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                        </button>
                    {{/canedit}}
                    {{#candelete}}
                        <button class="p-2 btn btn-danger"
                                data-action="delete-audience"
                                title="{{#str}} deleteaudience, core_reportbuilder, {{heading}} {{/str}}"
                                aria-label="{{#str}} deleteaudience, core_reportbuilder, {{heading}} {{/str}}"
                                {{^description}}disabled{{/description}}>
                                <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.75L7.59115 17.4233C7.68102 18.4568 8.54622 19.25 9.58363 19.25H14.4164C15.4538 19.25 16.319 18.4568 16.4088 17.4233L17.25 7.75"></path>
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 7.5V6.75C9.75 5.64543 10.6454 4.75 11.75 4.75H12.25C13.3546 4.75 14.25 5.64543 14.25 6.75V7.5"></path>
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 7.75H19"></path>
                                </svg>
                        </button>
                    {{/candelete}}
                </span>
            </div>
        </div>
        <div class="card-body p-3" data-region="audience-form">
            <div data-region="audience-description" {{^description}}class="hidden"{{/description}}>
                {{{description}}}
            </div>
            <div data-region="audience-form-container" {{^form}}class="hidden"{{/form}}>
                <div class="alert alert-warning p-2" data-region="audience-not-saved">{{#str}} audiencenotsaved, core_reportbuilder {{/str}}</div>
                {{{form}}}
            </div>
        </div>
    </div>
</div>