{{!
    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/>.
}}
<div class="searchtextarea" data-region="search-text-area">
    <label class="accesshide" for="searchtext">{{#str}}search{{/str}}</label>
    <input data-region="search-box" type="text" id="searchtext" placeholder="{{#contactsfirst}} {{#str}}searchforuserorcourse, message{{/str}} {{/contactsfirst}} {{^contactsfirst}} {{#str}}searchmessages, message{{/str}} {{/contactsfirst}}">
    <div data-region="search-filter-area" class="searchfilterarea" style="display:none" role="button" tabindex="0">
        <div data-region="search-filter" class="searchfilter"></div>
        <div data-action="search-filter-delete" class="searchfilterdelete">{{#pix}}t/delete{{/pix}}</div>
    </div>
</div>
{{#contactsfirst}}
<div class="contacts" data-region="contacts" data-region-content="conversations" style="display:none;" role="tabpanel" id="conversations-tab-panel"></div>
<div class="contacts" data-region="contacts" data-region-content="contacts" role="tabpanel" id="contacts-tab-panel">
    {{> core_message/message_area_contacts }}
</div>
{{/contactsfirst}}
{{^contactsfirst}}
<div class="contacts" data-region="contacts" data-region-content="conversations" role="tabpanel" id="conversations-tab-panel">
    {{> core_message/message_area_contacts }}
</div>
<div class="contacts" data-region="contacts" data-region-content="contacts" style="display:none;" role="tabpanel" id="contacts-tab-panel"></div>
{{/contactsfirst}}
{{! Hidden divs to load the other tab and search panels via JS when appropriate. }}
<div class="contacts searcharea" data-region="search-results-area" style="display:none;"></div>
<div class="tabs" role="tablist">
    <div class="tab tabconversations {{^contactsfirst}}selected{{/contactsfirst}} " data-action="conversations-view" role="tab" aria-controls="conversations-tab-panel" aria-selected="{{^contactsfirst}}true{{/contactsfirst}}{{#contactsfirst}}false{{/contactsfirst}}" tabindex="0">
        <div class="tabimage">{{#pix}}t/message, moodle{{/pix}}</div>
        <div>{{#str}}messages, message{{/str}}</div>
    </div>
    <div class="tab tabcontacts {{#contactsfirst}}selected{{/contactsfirst}}" data-action="contacts-view" role="tab" aria-controls="contacts-tab-panel" aria-selected="{{#contactsfirst}}true{{/contactsfirst}}{{^contactsfirst}}false{{/contactsfirst}}" tabindex="-1">
        <div class="tabimage">{{#pix}}i/cohort, moodle{{/pix}}</div>
        <div>{{#str}}contacts, message{{/str}}</div>
    </div>
</div>