{{!
    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="profile-header">
    <div class="view-toggle btn-container">
        <button class="btn btn-link show-contacts" data-action="show-contacts">&lt; {{#str}} contacts, message {{/str}}</button>
    </div>
</div>
<div class="profile" data-userid="{{userid}}" data-region="profile">
    <div class="user-container">
        <a data-action="profile-view" href="#">
            <img class="profile-picture" src="{{profileimageurl}}"
                 alt="{{#str}}pictureof, moodle, {{fullname}}{{/str}}"
                 title="{{#str}}pictureof, moodle, {{fullname}}{{/str}}" />
        </a>
        <div class="name-container">
            <div class="name">{{fullname}}</div>
            {{#showonlinestatus}}
                <div class="status {{#isonline}}online{{/isonline}}">
                    <div class="online-text">{{#str}} online, message {{/str}}</div>
                    <div class="offline-text">{{#str}} offline, message {{/str}}</div>
                </div>
            {{/showonlinestatus}}
        </div>
        <ul class="information">
            {{#email}}<li><div class="name">{{#str}} email {{/str}}</div><div class="value">{{.}}</div></li>{{/email}}
            {{#country}}<li><div class="name">{{#str}} country {{/str}}</div><div class="value">{{country}}</div></li>{{/country}}
            {{#city}}<li><div class="name">{{#str}} city {{/str}}</div><div class="value">{{city}}</div></li>{{/city}}
        </ul>
    </div>
    <div class="actions">
        <div class="separator">
            <a data-action="profile-send-message" href="#">{{#str}}sendmessage, message{{/str}}</a>
        </div>
        <div class="separator">
            {{#isblocked}}
                <a data-action="profile-unblock-contact" href="#">{{#str}}unblockcontact, message{{/str}}</a>
            {{/isblocked}}
            {{^isblocked}}
                <a class="danger" data-action="profile-block-contact" href="#">{{#str}}blockcontact, message{{/str}}</a>
            {{/isblocked}}
        </div>
        <div class="separator">
            {{#iscontact}}
                <a class="danger" data-action="profile-remove-contact" href="#">{{#str}}removecontact, message{{/str}}</a>
            {{/iscontact}}
            {{^iscontact}}
                <a data-action="profile-add-contact" href="#">{{#str}}addcontact, message{{/str}}</a>
            {{/iscontact}}
        </div>
    </div>
</div>