{{!
    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 core_message/message_drawer_view_search_results_content

    This template will render the search results content in the search page
    of the message drawer.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * All data attributes are required

    Context variables required for this template:
    * userid The logged in user id
    * urls The URLs for the popover

    Example context (json):
    {}

}}

<div class="d-flex flex-column">
    <div class="mb-3 bg-white" data-region="all-contacts-container">
        <div data-region="contacts-container"  class="pt-2">
            <h5 class="mt-3 d-flex align-items-center">
                <span class="mr-1">
                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="8" r="3.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25H6.94953C5.77004 19.25 4.88989 18.2103 5.49085 17.1954C6.36247 15.7234 8.23935 14 12.25 14"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 17.75L16 19.25L19.25 14.75"></path>
                    </svg>
                </span>
                {{#str}} contacts, core_message {{/str}}
            </h5>
            <div class="list-group" data-region="list"></div>
        </div>
        <div data-region="non-contacts-container" class="pt-2">
            <h5 class="mt-3 d-flex align-items-center">
                <span class="mr-1">
                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="8" r="3.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25H6.94953C5.77004 19.25 4.88989 18.2103 5.49085 17.1954C6.36247 15.7234 8.23935 14 12.25 14"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.75 15.75"></path>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 19.25L19.25 15.75"></path>
                    </svg>
                </span>
                {{#str}} noncontacts, core_message {{/str}}
            </h5>
            <div class="list-group" data-region="list"></div>
        </div>
        <div class="my-2 px-2">
            <button class="btn btn-sm btn-secondary w-100" data-action="load-more-users">
                <span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
                <span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>
            </button>
        </div>
    </div>
    <div data-region="messages-container">

        <h5 class="mt-3 d-flex align-items-center">
            <span class="mr-1">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V14.25C19.25 15.3546 18.3546 16.25 17.25 16.25H14.625L12 19.25L9.375 16.25H6.75C5.64543 16.25 4.75 15.3546 4.75 14.25V6.75Z"></path>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.5 11C9.5 11.2761 9.27614 11.5 9 11.5C8.72386 11.5 8.5 11.2761 8.5 11C8.5 10.7239 8.72386 10.5 9 10.5C9.27614 10.5 9.5 10.7239 9.5 11Z"></path>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 11C12.5 11.2761 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.2761 11.5 11C11.5 10.7239 11.7239 10.5 12 10.5C12.2761 10.5 12.5 10.7239 12.5 11Z"></path>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.5 11C15.5 11.2761 15.2761 11.5 15 11.5C14.7239 11.5 14.5 11.2761 14.5 11C14.5 10.7239 14.7239 10.5 15 10.5C15.2761 10.5 15.5 10.7239 15.5 11Z"></path>
                </svg>
            </span>
            {{#str}} messages, core_message {{/str}}
        </h5>
        <div class="list-group" data-region="list"></div>
        <div class="my-3 px-2">
            <button class="btn btn-sm btn-secondary w-100" data-action="load-more-messages">
                <span data-region="button-text">{{#str}} loadmore, core_message {{/str}}</span>
                <span data-region="loading-icon-container" class="hidden">{{> core/loading }}</span>
            </button>
        </div>
    </div>
    <div class="hidden rui-message-container-md mt-3" data-region="no-results-container"><p class="small text-muted">{{#str}} noresults, core {{/str}}</p></div>
</div>
