{{!
    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 mod_casestudy/add_field_form

    Add field button with popover for Case Study field management

    Context variables required for this template:
    * cmid - Course module ID
    * fieldTypes - Array of available field types with icon
    * popoverContent - HTML content for the popover

    Example context (json):
    {
        "cmid": 123,
        "fieldTypes": [
            {"value": "text", "label": "Text", "icon": "font"},
            {"value": "textarea", "label": "Text area", "icon": "align-left"}
        ],
        "popoverContent": "<div>...</div>"
    }
}}

<div class="text-center mb-4">
    <button type="button"
            class="btn btn-primary btn-lg rounded-circle casestudy-add-field-btn"
            ata-toggle="popover"
            data-placement="bottom"
            data-html="true"
            data-trigger="click"

            title="{{#str}}addfield, mod_casestudy{{/str}}"
            style="width: 60px; height: 60px; font-size: 24px;"
            data-container="body"

            >
        <i class="fa fa-plus"></i>
    </button>


    <div class="mt-2">
        <small class="text-muted">{{#str}}clicktoaddfield, mod_casestudy{{/str}}</small>
    </div>
</div>

<div id="field-type-popover" class="hide">
    <div class="popover-field-types list-group" >
    {{#fieldtypes}}
        <a href="{{{url}}}" class="list-group-item field-type-option"><i class="fa fa-{{icon}}"></i>{{label}}</a>
    {{/fieldtypes}}
    </div>
</div>

{{#js}}

require(['jquery', 'theme_boost/popover'], function($, Popover) {
    // Initialize the popover with the field types
    $('.casestudy-add-field-btn').popover({
        content: $('#field-type-popover').html(),
        html: true,
        placement: 'bottom',
        trigger: 'click',
        container: 'body',
    });

});
{{/js}}

<style>

#page-mod-casestudy-fields-manage .popover {
    max-width: 450px;
}

.field-type-popover {
    min-width: 250px;
}

.field-type-popover .popover-body {
    max-height: 350px;
    overflow-y: auto;
}


.popover-field-types {
    border-radius: 0.25rem;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.popover-field-types .list-group-item {
    border: 1px solid #ccc;
    border-radius: 21px;
    padding: 8px 15px;
    transition: all 0.2s ease;
    color: #495057;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-right: 10px;
}


.popover-field-types .list-group-item:hover {
    background-color: #f8f9fa;
    color: #007bff;
    transform: translateX(3px);
    text-decoration: none;
}

.popover-field-types .list-group-item:focus,
.popover-field-types .list-group-item:active {
    background-color: #e3f2fd;
    color: #1976d2;
    outline: none;
    text-decoration: none;
}

.popover-field-types .list-group-item i {
    width: 20px;
    text-align: center;
    color: #6c757d;
    margin-right: 5px;
}

.popover-field-types .list-group-item:hover i {
    color: #007bff;
}

.casestudy-add-field-btn {
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    border: none;
}

.casestudy-add-field-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4);
}

.casestudy-add-field-btn:active,
.casestudy-add-field-btn:focus {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    outline: none;
}

h3.popover-header {
    background-color: var(--primary, var(--bs-primary));
    color: #fff;
}
</style>