{{!
    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_coursegen/manage_image_generation

    Manage image generation settings page.

    Example context (json):
    {
        "currentmode": "manual",
        "overridecourse": true,
        "overrideactivity": false,
        "ismoddisabled": false,
        "ismodeauto": false,
        "ismodemanual": true,
        "partmaximageshelp": "",
        "activities": []
    }
}}
<div style="max-width: 900px; padding-bottom: 3rem;">

    <form data-region="local_coursegen/image_generation/form">

        <input type="hidden" data-region="local_coursegen/image_generation/input_mode" name="generationmode" value="{{currentmode}}">

        <div class="mb-5 mt-3">
            <h2 class="h3 font-weight-bold mb-2">{{#str}} manage_image_generation, local_coursegen {{/str}}</h2>
            <p class="text-muted">{{#str}} global_ai_policies_desc, local_coursegen {{/str}}</p>
        </div>

        <h4 class="h5 font-weight-bold text-dark mt-5 mb-1">{{#str}} config_permissions, local_coursegen {{/str}}</h4>
        <p class="text-muted mb-3">{{#str}} config_permissions_desc, local_coursegen {{/str}}</p>

        <div class="table-responsive">
            <table class="table table-striped border-bottom mb-4">
                <thead>
                    <tr>
                        <th scope="col" class="border-top-0 border-bottom w-75 py-3 text-dark">{{#str}} setting, local_coursegen {{/str}}</th>
                        <th scope="col" class="border-top-0 border-bottom py-3 text-dark">{{#str}} enabled, local_coursegen {{/str}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="align-middle py-3">
                            <div class="font-weight-bold text-dark">{{#str}} override_course, local_coursegen {{/str}}</div>
                        </td>
                        <td class="align-middle py-3">
                            <div class="custom-control custom-switch" data-toggle="tooltip" title="{{#str}} tooltip_override_course, local_coursegen {{/str}}">
                                <input type="checkbox" class="custom-control-input" id="override-course" name="overridecourse" value="1" {{#overridecourse}}checked{{/overridecourse}}>
                                <label class="custom-control-label" for="override-course" style="cursor: pointer;"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="align-middle py-3">
                            <div class="font-weight-bold text-dark">{{#str}} override_activity, local_coursegen {{/str}}</div>
                        </td>
                        <td class="align-middle py-3">
                            <div class="custom-control custom-switch" data-toggle="tooltip" title="{{#str}} tooltip_override_activity, local_coursegen {{/str}}">
                                <input type="checkbox" class="custom-control-input" id="override-activity" name="overrideactivity" value="1" {{#overrideactivity}}checked{{/overrideactivity}}>
                                <label class="custom-control-label" for="override-activity" style="cursor: pointer;"></label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h4 class="h5 font-weight-bold text-dark mt-5 mb-1">{{#str}} default_behavior, local_coursegen {{/str}}</h4>
        <p class="text-muted mb-3">{{#str}} default_behavior_desc, local_coursegen {{/str}}</p>

        <div class="row mb-4">
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="card h-100 {{#ismoddisabled}}border-danger bg-light{{/ismoddisabled}}" data-region="local_coursegen/image_generation/mode_card" data-mode="disabled" style="cursor: pointer;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="mb-0 text-danger" style="font-size: 1.1rem; line-height: 1;"><i class="icon fa fa-ban fa-fw" aria-hidden="true"></i></div>
                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="radio-disabled" name="mode_visual_radio" {{#ismoddisabled}}checked{{/ismoddisabled}}>
                                <label class="custom-control-label" for="radio-disabled" style="cursor: pointer;"></label>
                            </div>
                        </div>
                        <h6 class="font-weight-bold text-dark mb-1 small">{{#str}} mode_disabled, local_coursegen {{/str}}</h6>
                        <p class="small text-muted mb-0">{{#str}} mode_disabled_desc, local_coursegen {{/str}}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="card h-100 {{#ismodemanual}}border-primary bg-light{{/ismodemanual}}" data-region="local_coursegen/image_generation/mode_card" data-mode="manual" style="cursor: pointer;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="mb-0 text-primary" style="font-size: 1.1rem; line-height: 1;"><i class="icon fa fa-cog fa-fw" aria-hidden="true"></i></div>
                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="radio-manual" name="mode_visual_radio" {{#ismodemanual}}checked{{/ismodemanual}}>
                                <label class="custom-control-label" for="radio-manual" style="cursor: pointer;"></label>
                            </div>
                        </div>
                        <h6 class="font-weight-bold text-dark mb-1 small">{{#str}} mode_manual, local_coursegen {{/str}}</h6>
                        <p class="small text-muted mb-0">{{#str}} mode_manual_desc, local_coursegen {{/str}}</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100 {{#ismodeauto}}border-primary bg-light{{/ismodeauto}}" data-region="local_coursegen/image_generation/mode_card" data-mode="auto" style="cursor: pointer;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div class="mb-0 text-primary" style="font-size: 1.1rem; line-height: 1;"><i class="icon fa fa-magic fa-fw" aria-hidden="true"></i></div>
                            <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="radio-auto" name="mode_visual_radio" {{#ismodeauto}}checked{{/ismodeauto}}>
                                <label class="custom-control-label" for="radio-auto" style="cursor: pointer;"></label>
                            </div>
                        </div>
                        <h6 class="font-weight-bold text-dark mb-1 small">{{#str}} mode_auto, local_coursegen {{/str}}</h6>
                        <p class="small text-muted mb-0">{{#str}} mode_auto_desc, local_coursegen {{/str}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div data-region="local_coursegen/image_generation/manual_settings" class="{{^ismodemanual}}d-none{{/ismodemanual}}">
            <h4 class="h5 font-weight-bold text-dark mt-5 mb-1">{{#str}} generation_rules, local_coursegen {{/str}}</h4>
            <p class="text-muted mb-3">{{#str}} generation_rules_desc, local_coursegen {{/str}}</p>

            <div class="table-responsive">
                <table class="table table-striped border-bottom mb-4">
                    <thead>
                        <tr>
                            <th scope="col" class="border-top-0 border-bottom w-75 py-3 text-dark">{{#str}} activity_or_resource, local_coursegen {{/str}}</th>
                            <th scope="col" class="border-top-0 border-bottom py-3 text-dark text-right">{{#str}} enabled, local_coursegen {{/str}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#activities}}
                        <tr data-region="local_coursegen/image_generation/activity_row" data-activity-id="{{id}}">
                            <td class="align-middle py-3">
                                <div class="d-flex align-items-center">
                                    <div class="mr-2">
                                        <img src="{{iconurl}}" class="icon" alt="{{name}}" style="width: 20px; height: 20px;" />
                                    </div>
                                    <span class="font-weight-bold text-dark">{{name}}</span>
                                </div>
                            </td>
                            <td class="align-middle py-3 text-right">
                                <div class="custom-control custom-switch d-inline-block" data-toggle="tooltip" title="{{tooltip}}">
                                    <input type="checkbox" class="custom-control-input" id="switch-{{id}}" value="1" data-action="local_coursegen/image_generation/toggle_activity" data-target="content-{{id}}" {{#enabled}}checked{{/enabled}}>
                                    <label class="custom-control-label" for="switch-{{id}}" style="cursor: pointer;"></label>
                                </div>
                            </td>
                        </tr>
                        <tr class="collapse-row">
                            <td colspan="2" class="p-0">
                                <div class="collapse {{#show}}show{{/show}} border-top" id="content-{{id}}" data-region="local_coursegen/image_generation/activity_content" data-content="content-{{id}}">
                                    <div class="form-group mb-0 pt-2 px-3 pb-3">
                                        {{#parts}}
                                        <div class="d-flex align-items-center mb-1">
                                            <div class="custom-control custom-checkbox mr-2 mb-0">
                                                <input type="checkbox"
                                                    class="custom-control-input"
                                                    id="part-{{partuniqueid}}"
                                                    value="1"
                                                    data-action="local_coursegen/image_generation/part_toggle"
                                                    data-part-id="{{id}}"
                                                    {{#enabled}}checked{{/enabled}}>
                                                <label class="custom-control-label" for="part-{{partuniqueid}}">{{label}}</label>
                                            </div>
                                            <input type="number"
                                                class="form-control form-control-sm ml-auto"
                                                style="width: 4.5rem;"
                                                min="0"
                                                value="{{maximages}}"
                                                aria-label="{{label}}"
                                                data-region="local_coursegen/image_generation/part_maximages"
                                                data-part-id="{{id}}"
                                                {{^enabled}}disabled{{/enabled}}>
                                            <span class="ml-2 d-inline-block">{{{partmaximageshelp}}}</span>
                                        </div>
                                        {{/parts}}
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {{/activities}}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-4 pt-3 text-right">
            <button type="submit" data-action="local_coursegen/image_generation/save" class="btn btn-primary">
                {{#str}} savechanges, core {{/str}}
            </button>
        </div>

    </form>
</div>

{{#js}}
    require(['local_coursegen/manage_image_generation'], function(ManageImageGeneration) {
        ManageImageGeneration.init();
    });
{{/js}}
