diff --git a/group/classes/output/index_page.php b/group/classes/output/index_page.php
new file mode 100644
index 00000000000..8430aae74b9
--- /dev/null
+++ b/group/classes/output/index_page.php
@@ -0,0 +1,111 @@
+.
+
+/**
+ * Group index page.
+ *
+ * @package core_group
+ * @copyright 2017 Jun Pataleta
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+namespace core_group\output;
+defined('MOODLE_INTERNAL') || die();
+
+use renderable;
+use renderer_base;
+use stdClass;
+use templatable;
+
+/**
+ * Group index page class.
+ *
+ * @package core_group
+ * @copyright 2017 Jun Pataleta
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class index_page implements renderable, templatable {
+
+ /** @var int $courseid The course ID. */
+ public $courseid;
+
+ /** @var array The array of groups to be rendered. */
+ public $groups;
+
+ /** @var string The name of the currently selected group. */
+ public $selectedgroupname;
+
+ /** @var array The array of group members to be rendered, if a group is selected. */
+ public $selectedgroupmembers;
+
+ /** @var bool Whether to disable the add members/edit group buttons. */
+ public $disableaddedit;
+
+ /** @var bool Whether to disable the delete group button. */
+ public $disabledelete;
+
+ /** @var array Groups that can't be deleted by the user. */
+ public $undeletablegroups;
+
+ /**
+ * index_page constructor.
+ *
+ * @param int $courseid The course ID.
+ * @param array $groups The array of groups to be rendered.
+ * @param string $selectedgroupname The name of the currently selected group.
+ * @param array $selectedgroupmembers The array of group members to be rendered, if a group is selected.
+ * @param bool $disableaddedit Whether to disable the add members/edit group buttons.
+ * @param bool $disabledelete Whether to disable the delete group button.
+ * @param array $undeletablegroups Groups that can't be deleted by the user.
+ */
+ public function __construct($courseid, $groups, $selectedgroupname, $selectedgroupmembers, $disableaddedit, $disabledelete,
+ $undeletablegroups) {
+ $this->courseid = $courseid;
+ $this->groups = $groups;
+ $this->selectedgroupname = $selectedgroupname;
+ $this->selectedgroupmembers = $selectedgroupmembers;
+ $this->disableaddedit = $disableaddedit;
+ $this->disabledelete = $disabledelete;
+ $this->undeletablegroups = $undeletablegroups;
+ }
+
+ /**
+ * Export the data.
+ *
+ * @param renderer_base $output
+ * @return stdClass
+ */
+ public function export_for_template(renderer_base $output) {
+ global $CFG;
+
+ $data = new stdClass();
+
+ // Variables that will be passed to the JS helper.
+ $data->courseid = $this->courseid;
+ $data->wwwroot = $CFG->wwwroot;
+ // To be passed to the JS init script in the template. Encode as a JSON string.
+ $data->undeletablegroups = json_encode($this->undeletablegroups);
+
+ // Some buttons are enabled if single group selected.
+ $data->addmembersdisabled = $this->disableaddedit;
+ $data->editgroupsettingsdisabled = $this->disableaddedit;
+ $data->deletegroupdisabled = $this->disabledelete;
+ $data->groups = $this->groups;
+ $data->members = $this->selectedgroupmembers;
+ $data->selectedgroup = $this->selectedgroupname;
+
+ return $data;
+ }
+}
diff --git a/group/classes/output/renderer.php b/group/classes/output/renderer.php
new file mode 100644
index 00000000000..14443cf7891
--- /dev/null
+++ b/group/classes/output/renderer.php
@@ -0,0 +1,50 @@
+.
+
+/**
+ * Renderers.
+ *
+ * @package core_group
+ * @copyright 2017 Jun Pataleta
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace core_group\output;
+
+defined('MOODLE_INTERNAL') || die();
+
+use plugin_renderer_base;
+
+/**
+ * Renderer class.
+ *
+ * @package core_group
+ * @copyright 2017 Jun Pataleta
+ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class renderer extends plugin_renderer_base {
+
+ /**
+ * Defer to template.
+ *
+ * @param index_page $page
+ * @return string
+ */
+ public function render_index_page(index_page $page) {
+ $data = $page->export_for_template($this);
+ return parent::render_from_template('core_group/index', $data);
+ }
+}
diff --git a/group/index.php b/group/index.php
index 6571f545d91..8150e196f00 100644
--- a/group/index.php
+++ b/group/index.php
@@ -61,6 +61,7 @@ $context = context_course::instance($course->id);
require_capability('moodle/course:managegroups', $context);
$PAGE->requires->js('/group/clientlib.js');
+$PAGE->requires->js('/group/module.js');
// Check for multiple/no group errors
if (!$singlegroup) {
@@ -152,41 +153,23 @@ echo $OUTPUT->header();
$currenttab = 'groups';
require('tabs.php');
-$disabled = 'disabled="disabled"';
-
-// Some buttons are enabled if single group selected.
-$showaddmembersform_disabled = $singlegroup ? '' : $disabled;
-$showeditgroupsettingsform_disabled = $singlegroup ? '' : $disabled;
-$deletegroup_disabled = count($groupids) > 0 ? '' : $disabled;
-
echo $OUTPUT->heading(format_string($course->shortname, true, array('context' => $context)) .' '.$strgroups, 3);
-echo ''."\n";
-
-$PAGE->requires->js_init_call('M.core_group.init_index', array($CFG->wwwroot, $courseid));
-$PAGE->requires->js_init_call('M.core_group.groupslist', array($preventgroupremoval));
+$disableaddedit = !$singlegroup;
+$disabledelete = !empty($groupids);
+$renderable = new \core_group\output\index_page($courseid, $groupoptions, $selectedname, $members, $disableaddedit, $disabledelete,
+ $preventgroupremoval);
+$output = $PAGE->get_renderer('core_group');
+echo $output->render($renderable);
echo $OUTPUT->footer();
diff --git a/group/templates/index.mustache b/group/templates/index.mustache
new file mode 100644
index 00000000000..fb8be7f75eb
--- /dev/null
+++ b/group/templates/index.mustache
@@ -0,0 +1,145 @@
+{{!
+ 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 .
+}}
+{{!
+ @template core_group/index
+
+ Template for the Groups page.
+
+ Classes required for JS:
+ * none
+
+ Data attributes required for JS:
+ * none
+
+ Context variables required for this template:
+ * courseid int The course ID.
+ * selectedgroup string The initially selected group.
+ * editgroupsettingsdisabled bool Whether to disable the "Edit group settings" button on load.
+ * deletegroupdisabled bool Whether to disable the "Delete selected group" button on load.
+ * addmembersdisabled bool Whether to disable the "Add/remove users" button on load.
+ * groups array The list of groups.
+ * members array The list of members, grouped based on roles.
+ * undeletablegroups string A JSON string containing an array of group IDs that a user cannot delete.
+
+ Example context (json):
+ {
+ "courseid": "1",
+ "selectedgroup": "Group 1 (3)",
+ "editgroupsettingsdisabled": false,
+ "deletegroupdisabled": false,
+ "addmembersdisabled": false,
+ "groups": [
+ {
+ "value": "1",
+ "text": "Group 1 (3)",
+ "selected": true
+ },
+ {
+ "value": "2",
+ "text": "Group 2 (2)"
+ }
+ ],
+ "members": [
+ {
+ "role": "Student",
+ "rolemembers": [
+ {
+ "value": "1",
+ "text": "John Doe"
+ },
+ {
+ "value": "2",
+ "text": "Jane Doe"
+ },
+ {
+ "value": "3",
+ "text": "John Smith"
+ }
+ ]
+ }
+ ],
+ "undeletablegroups": "[1: true, 3: true]"
+ }
+}}
+
+{{#js}}
+ require(['jquery', 'core/yui'], function($) {
+ $("#groups").change(function() {
+ M.core_group.membersCombo.refreshMembers();
+ });
+ M.core_group.init_index(Y, "{{wwwroot}}", {{courseid}});
+ var undeletableGroups = JSON.parse('{{{undeletablegroups}}}');
+ M.core_group.groupslist(Y, undeletableGroups);
+ });
+{{/js}}