{{=<% %>=}}
<%!
    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 block_deft/mobile_choice

    This template renders the view for the choice task

    Example context (json):
    {
        "name": "Language",
        "question": "Which language do you prefer?",
        "options": [
            {
                "key": 1,
                "value": "English"
            },
            {
                "key": 2,
                "value": "French"
            }
        ],
        "contextid": 2
    }
}}
%>
<%# visible %>
    <h5><% name %></h5>
    <div class="block_deft_choice">
        <div class="deft-choice-prompt p-3"><%{ question }%></div>
        <div class="deft-choice-selector form-inline" data-id="<%id%>">
            <ion-list>
                <ion-item>
                    <ion-select id="deft-choice-select-<% id %>"
                        value="<% selection %>"
                        [(ngModel)]="CONTENT_OTHERDATA.choice<% id %>"
                        interface="action-sheet"
                        <%# disabled %> disabled="true" <%/ disabled %>
                        placeholder="{{ 'plugin.block_deft.select' | translate }}"
                        (ionChange)="updateContent({ task: '<% id %>', blockid: '<% instance %>',
                            uniqid: '<% uniqid %>',
                            contextlevel: '<% contextlevel %>',
                            instanceid: '<% instanceid %>',
                            timemodified: '<% timemodified %>',
                            choice: CONTENT_OTHERDATA.choice<% id %> })"
                    >
                        <%# options %>
                        <ion-select-option value="<% key %>"><% value %></ion-select-option>
                        <%/ options %>
                    </ion-select>
                </ion-item>
            </ion-list>
        </div>
    </div>
    <%# summary %>
        <svg
            width="240" height="180" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="10 5 <% width %> <% height %>" xml:space="preserve" preserveAspectRatio="xMinYMid meet"
        >
             <%# results %>
                  <%^ pie %>
                      <rect width="40" height="<% height %>" x="<% x %>" y="<% y %>" fill="<% fill %>"/>
                  <%/ pie %>
                  <%# pie %>
                      <%# count %>
                          <%# sum %>
                              <path d="M 90 15
                                  A 45 45, 0, <% path %>, 0, <% px %> <% py %>
                                  L 90 60 Z" fill="<% fill %>"/>
                          <%/ sum %>
                          <%^ sum %>
                              <circle r="45" cx="90" cy="60" fill="<% fill %>"/>
                          <%/ sum %>
                      <%/ count %>
                  <%/ pie %>
             <%/ results %>
        </svg>
        <table class="table" style="width: 100%">
            <tr><th>{{ 'plugin.block_deft.response' | translate }}</th><th>{{ 'plugin.block_deft.count' | translate }}</th></tr>
        <%# results %>
            <tr style="color: <% fill %>;"><td><% response %></td><td style="text-align: center"><%count%></td></tr>
        <%/ results %>
        </table>
    <%/ summary %>
<%/ visible %>
