@page "/doc/all-icons"

@*
 *                                dbMango
 *
 * Copyright 2025 Deutsche Bank AG
 * SPDX-License-Identifier: Apache-2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *@


<h3>All Icons</h3>

<FormItemText Icon="icon-search-sm" @bind-Value="_searchText" Placeholder="Search icons..." Name="Search" />
@* <input @bind="searchText" @bind:event="oninput" placeholder="Search icons..." style="margin-bottom:1.5rem; width: 20rem; padding: 0.5rem; font-size: 1rem;" /> *@

<div style="display: flex; flex-wrap: wrap; gap: 1.5rem;">
    @foreach (var icon in FilteredIcons.OrderBy(x => x.DisplayName))
    {
        <div style="width: 8rem; display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem;">
            <span class="ui-icon-font @icon.ClassName" style="font-size:1rem; margin-bottom:1rem;"></span>
            <span style="font-size:0.8rem; text-align:center; word-break:break-all;">@icon.DisplayName</span>
        </div>
    }
</div>

@code {
    // List of icon class names and their display names
    private readonly List<(string ClassName, string DisplayName)> _icons =
    [
        ("icon-alarm-clock-sm", "alarm-clock-sm"),
        ("icon-cog-outline-sm", "cog-outline-sm"),
        ("icon-ellipsis-sm", "ellipsis-sm"),
        ("icon-image-sm", "image-sm"),
        ("icon-mouse-left-sm", "mouse-left-sm"),
        ("icon-single-chevron-down-sm", "single-chevron-down-sm"),
        ("icon-single-chevron-right-sm", "single-chevron-right-sm"),
        ("icon-single-chevron-up-sm", "single-chevron-up-sm"),
        ("icon-star-half-sm", "star-half-sm"),
        ("icon-undo-sm", "undo-sm"),
        ("icon-unlock-outline-sm", "unlock-outline-sm"),
        ("icon-unlock-sm", "unlock-sm"),
        ("icon-unlock-wide-sm", "unlock-wide-sm"),
        ("icon-wrench-outline-sm", "wrench-outline-sm"),
        ("icon-ab-logo-sm", "ab-logo-sm"),
        ("icon-calendar-sm", "calendar-sm"),
        ("icon-caret-down-sm", "caret-down-sm"),
        ("icon-caret-left-sm", "caret-left-sm"),
        ("icon-caret-right-sm", "caret-right-sm"),
        ("icon-caret-up-sm", "caret-up-sm"),
        ("icon-cascade-sm", "cascade-sm"),
        ("icon-chat-outline-sm", "chat-outline-sm"),
        ("icon-chat-sm", "chat-sm"),
        ("icon-checkmark-sm", "checkmark-sm"),
        ("icon-clone-sm", "clone-sm"),
        ("icon-close-circle-sm", "close-circle-sm"),
        ("icon-close-sm", "close-sm"),
        ("icon-cog-sm", "cog-sm"),
        ("icon-document-blank-sm", "document-blank-sm"),
        ("icon-document-download-sm", "document-download-sm"),
        ("icon-document-sm", "document-sm"),
        ("icon-document-upload-sm", "document-upload-sm"),
        ("icon-download-selected-sm", "download-selected-sm"),
        ("icon-download-sm", "download-sm"),
        ("icon-flip-sm", "flip-sm"),
        ("icon-folder-outline-sm", "folder-outline-sm"),
        ("icon-folder-sm", "folder-sm"),
        ("icon-layers-sm", "layers-sm"),
        ("icon-mobile-sm", "mobile-sm"),
        ("icon-pencil-sm", "pencil-sm"),
        ("icon-play-sm", "play-sm"),
        ("icon-print-sm", "print-sm"),
        ("icon-save-outline-sm", "save-outline-sm"),
        ("icon-save-sm", "save-sm"),
        ("icon-search-sm", "search-sm"),
        ("icon-single-chevron-left-sm", "single-chevron-left-sm"),
        ("icon-trash-sm", "trash-sm"),
        ("icon-user-db-outline-sm", "user-db-outline-sm"),
        ("icon-user-db-sm", "user-db-sm"),
        ("icon-user-details-outline-sm", "user-details-outline-sm"),
        ("icon-user-details-sm", "user-details-sm"),
        ("icon-user-group-outline-sm", "user-group-outline-sm"),
        ("icon-user-group-sm", "user-group-sm"),
        ("icon-wrench-sm", "wrench-sm"),
        ("icon-arrow-down-sm", "arrow-down-sm"),
        ("icon-arrow-left-sm", "arrow-left-sm"),
        ("icon-arrow-right-sm", "arrow-right-sm"),
        ("icon-arrow-up-sm", "arrow-up-sm"),
        ("icon-bell-outline-sm", "bell-outline-sm"),
        ("icon-bell-sm", "bell-sm"),
        ("icon-chain-sm", "chain-sm"),
        ("icon-chart-area-sm", "chart-area-sm"),
        ("icon-chart-bar-sm", "chart-bar-sm"),
        ("icon-chart-complex-line-sm", "chart-complex-line-sm"),
        ("icon-chart-curve-sm", "chart-curve-sm"),
        ("icon-chart-simple-line-sm", "chart-simple-line-sm"),
        ("icon-clock-sm", "clock-sm"),
        ("icon-funnel-clear-sm", "funnel-clear-sm"),
        ("icon-funnel-sm", "funnel-sm"),
        ("icon-globe-sm", "globe-sm"),
        ("icon-grid-sm", "grid-sm"),
        ("icon-join-sm", "join-sm"),
        ("icon-list-sm", "list-sm"),
        ("icon-lock-sm", "lock-sm"),
        ("icon-merge-sm", "merge-sm"),
        ("icon-message-outline-sm", "message-outline-sm"),
        ("icon-message-sm", "message-sm"),
        ("icon-moon-sm", "moon-sm"),
        ("icon-pause-sm", "pause-sm"),
        ("icon-phone-directory-sm", "phone-directory-sm"),
        ("icon-phone-sm", "phone-sm"),
        ("icon-plug-disconnected-sm", "plug-disconnected-sm"),
        ("icon-print-outline-sm", "print-outline-sm"),
        ("icon-reply-outline-sm", "reply-outline-sm"),
        ("icon-reply-sm", "reply-sm"),
        ("icon-revert-sm", "revert-sm"),
        ("icon-star-outline-sm", "star-outline-sm"),
        ("icon-star-sm", "star-sm"),
        ("icon-tos-sm", "tos-sm"),
        ("icon-window-add-sm", "window-add-sm"),
        ("icon-zoom-in-sm", "zoom-in-sm"),
        ("icon-zoom-out-sm", "zoom-out-sm"),
        ("icon-annotate-sm", "annotate-sm"),
        ("icon-attach-sm", "attach-sm"),
        ("icon-bezir-curve-sm", "bezir-curve-sm"),
        ("icon-contacts-cog-sm", "contacts-cog-sm"),
        ("icon-context-help-outline-sm", "context-help-outline-sm"),
        ("icon-context-help-sm", "context-help-sm"),
        ("icon-context-info-outline-sm", "context-info-outline-sm"),
        ("icon-context-info-sm", "context-info-sm"),
        ("icon-duplicate-document-sm", "duplicate-document-sm"),
        ("icon-excel-sm", "excel-sm"),
        ("icon-exit-sm", "exit-sm"),
        ("icon-first-aid-sm", "first-aid-sm"),
        ("icon-forward-document-sm", "forward-document-sm"),
        ("icon-hide-sm", "hide-sm"),
        ("icon-link-sm", "link-sm"),
        ("icon-mail-outline-sm", "mail-outline-sm"),
        ("icon-mail-sm", "mail-sm"),
        ("icon-menu-sm", "menu-sm"),
        ("icon-pc-screen-sm", "pc-screen-sm"),
        ("icon-plus-sm", "plus-sm"),
        ("icon-reload-sm", "reload-sm"),
        ("icon-running-man-sm", "running-man-sm"),
        ("icon-upload-selected-sm", "upload-selected-sm"),
        ("icon-upload-sm", "upload-sm"),
        ("icon-user-outline-sm", "user-outline-sm"),
        ("icon-user-sm", "user-sm"),
        ("icon-view-sm", "view-sm"),
        ("icon-warning-circle-sm", "warning-circle-sm"),
        ("icon-warning-triangle-sm", "warning-triangle-sm"),
        ("icon-weight-equal-sm", "weight-equal-sm"),
        ("icon-weight-not-equal-sm", "weight-not-equal-sm"),
        // Large icons
        ("icon-ab-logo", "ab-logo"),
        ("icon-adobe-reader", "adobe-reader"),
        ("icon-alarm-clock", "alarm-clock"),
        ("icon-annotate", "annotate"),
        ("icon-arrow-down", "arrow-down"),
        ("icon-arrow-enter", "arrow-enter"),
        ("icon-arrow-left", "arrow-left"),
        ("icon-arrow-right", "arrow-right"),
        ("icon-arrow-up", "arrow-up"),
        ("icon-attach", "attach"),
        ("icon-bell", "bell"),
        ("icon-bell-outline", "bell-outline"),
        ("icon-bezir-curve", "bezir-curve"),
        ("icon-boxing-glove", "boxing-glove"),
        ("icon-calendar", "calendar"),
        ("icon-caret-down", "caret-down"),
        ("icon-caret-left", "caret-left"),
        ("icon-caret-right", "caret-right"),
        ("icon-caret-up", "caret-up"),
        ("icon-caret-up-down", "caret-up-down"),
        ("icon-cascade", "cascade"),
        ("icon-chain", "chain"),
        ("icon-chart-area", "chart-area"),
        ("icon-chart-bar", "chart-bar"),
        ("icon-chart-complex-line", "chart-complex-line"),
        ("icon-chart-curve", "chart-curve"),
        ("icon-chart-simple-line", "chart-simple-line"),
        ("icon-chat", "chat"),
        ("icon-chat-outline", "chat-outline"),
        ("icon-checkmark", "checkmark"),
        ("icon-clock", "clock"),
        ("icon-clone", "clone"),
        ("icon-close", "close"),
        ("icon-close-circle", "close-circle"),
        ("icon-cog", "cog"),
        ("icon-cog-outline", "cog-outline"),
        ("icon-contacts-cog", "contacts-cog"),
        ("icon-context-help", "context-help"),
        ("icon-context-help-outline", "context-help-outline"),
        ("icon-context-info", "context-info"),
        ("icon-context-info-outline", "context-info-outline"),
        ("icon-db-logo", "db-logo"),
        ("icon-document", "document"),
        ("icon-document-add", "document-add"),
        ("icon-document-blank", "document-blank"),
        ("icon-document-code", "document-code"),
        ("icon-document-download", "document-download"),
        ("icon-document-forward", "document-forward"),
        ("icon-document-upload", "document-upload"),
        ("icon-double-chevron-down", "double-chevron-down"),
        ("icon-double-chevron-left", "double-chevron-left"),
        ("icon-double-chevron-right", "double-chevron-right"),
        ("icon-double-chevron-up", "double-chevron-up"),
        ("icon-download", "download"),
        ("icon-download-selected", "download-selected"),
        ("icon-drawer", "drawer"),
        ("icon-duplicate-document", "duplicate-document"),
        ("icon-ellipsis", "ellipsis"),
        ("icon-envelope", "envelope"),
        ("icon-envelope-outline", "envelope-outline"),
        ("icon-excel", "excel"),
        ("icon-exit", "exit"),
        ("icon-first-aid", "first-aid"),
        ("icon-flag", "flag"),
        ("icon-flag-outline", "flag-outline"),
        ("icon-flame", "flame"),
        ("icon-flip", "flip"),
        ("icon-folder", "folder"),
        ("icon-folder-add", "folder-add"),
        ("icon-folder-add-outline", "folder-add-outline"),
        ("icon-folder-open", "folder-open"),
        ("icon-folder-open-outline", "folder-open-outline"),
        ("icon-folder-outline", "folder-outline"),
        ("icon-folder-remove", "folder-remove"),
        ("icon-folder-remove-outline", "folder-remove-outline"),
        ("icon-funnel", "funnel"),
        ("icon-funnel-clear", "funnel-clear"),
        ("icon-gauge", "gauge"),
        ("icon-globe", "globe"),
        ("icon-grid", "grid"),
        ("icon-help", "help"),
        ("icon-hide", "hide"),
        ("icon-history", "history"),
        ("icon-image", "image"),
        ("icon-info", "info"),
        ("icon-join", "join"),
        ("icon-ladder-down", "ladder-down"),
        ("icon-ladder-up", "ladder-up"),
        ("icon-layers", "layers"),
        ("icon-link", "link"),
        ("icon-list", "list"),
        ("icon-list-items", "list-items"),
        ("icon-lock", "lock"),
        ("icon-menu", "menu"),
        ("icon-merge", "merge"),
        ("icon-message", "message"),
        ("icon-message-outline", "message-outline"),
        ("icon-mobile", "mobile"),
        ("icon-moon", "moon"),
        ("icon-mouse-left", "mouse-left"),
        ("icon-number-outline", "number-outline"),
        ("icon-paste", "paste"),
        ("icon-pause", "pause"),
        ("icon-pc-screen", "pc-screen"),
        ("icon-pencil", "pencil"),
        ("icon-phone", "phone"),
        ("icon-phone-directory", "phone-directory"),
        ("icon-phone-directory-outline", "phone-directory-outline"),
        ("icon-phone-outline", "phone-outline"),
        ("icon-pin-down", "pin-down"),
        ("icon-pin-down-outline", "pin-down-outline"),
        ("icon-pin-left", "pin-left"),
        ("icon-pin-left-bottom", "pin-left-bottom"),
        ("icon-pin-left-bottom-outline", "pin-left-bottom-outline"),
        ("icon-pin-left-outline", "pin-left-outline"),
        ("icon-play", "play"),
        ("icon-plug", "plug"),
        ("icon-plug-disconnected", "plug-disconnected"),
        ("icon-plug-disconnected-outline", "plug-disconnected-outline"),
        ("icon-plus", "plus"),
        ("icon-printer", "printer"),
        ("icon-printer-outline", "printer-outline"),
        ("icon-reject", "reject"),
        ("icon-reload", "reload"),
        ("icon-reply", "reply"),
        ("icon-reply-outline", "reply-outline"),
        ("icon-revert", "revert"),
        ("icon-rss", "rss"),
        ("icon-running-man", "running-man"),
        ("icon-save", "save"),
        ("icon-save-outline", "save-outline"),
        ("icon-search", "search"),
        ("icon-single-chevron-down", "single-chevron-down"),
        ("icon-single-chevron-left", "single-chevron-left"),
        ("icon-single-chevron-right", "single-chevron-right"),
        ("icon-single-chevron-up", "single-chevron-up"),
        ("icon-sliders-horizontal", "sliders-horizontal"),
        ("icon-star", "star"),
        ("icon-star-half", "star-half"),
        ("icon-star-outline", "star-outline"),
        ("icon-text-bold", "text-bold"),
        ("icon-text-italic", "text-italic"),
        ("icon-thumbs-up", "thumbs-up"),
        ("icon-tiles", "tiles"),
        ("icon-tos", "tos"),
        ("icon-trash", "trash"),
        ("icon-txt", "txt"),
        ("icon-undo", "undo"),
        ("icon-unlock", "unlock"),
        ("icon-unlock-outline", "unlock-outline"),
        ("icon-unlock-wide", "unlock-wide"),
        ("icon-upload", "upload"),
        ("icon-upload-selected", "upload-selected"),
        ("icon-user", "user"),
        ("icon-user-add", "user-add"),
        ("icon-user-add-outline", "user-add-outline"),
        ("icon-user-db", "user-db"),
        ("icon-user-db-outline", "user-db-outline"),
        ("icon-user-details", "user-details"),
        ("icon-user-group", "user-group"),
        ("icon-user-group-outline", "user-group-outline"),
        ("icon-user-outline", "user-outline"),
        ("icon-user-remove", "user-remove"),
        ("icon-user-remove-outline", "user-remove-outline"),
        ("icon-user-star-outline", "user-star-outline"),
        ("icon-view", "view"),
        ("icon-warning-circle", "warning-circle"),
        ("icon-warning-triangle", "warning-triangle"),
        ("icon-weight-equal", "weight-equal"),
        ("icon-weight-not-equal", "weight-not-equal"),
        ("icon-window-add", "window-add"),
        ("icon-window-group", "window-group"),
        ("icon-wrench", "wrench"),
        ("icon-wrench-double-head-outline", "wrench-double-head-outline"),
        ("icon-wrench-outline", "wrench-outline"),
        ("icon-xml", "xml"),
        ("icon-zoom-in", "zoom-in"),
        ("icon-zoom-out", "zoom-out")
    ];

    private string _searchText = string.Empty;

    private IEnumerable<(string ClassName, string DisplayName)> FilteredIcons =>
        string.IsNullOrWhiteSpace(_searchText)
            ? _icons
            : _icons.Where(x => x.DisplayName.Contains(_searchText, StringComparison.OrdinalIgnoreCase));
}