@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'icons'
])

@section('content')
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card demo-icons">
                    <div class="card-header">
                        <h5 class="card-title">100 Awesome Nucleo Icons</h5>
                        <p class="card-category">Handcrafted by our friends from
                            <a href="https://nucleoapp.com/?ref=1712">NucleoApp</a>
                        </p>
                    </div>
                    <div class="card-body all-icons">
                        <div id="icons-wrapper">
                            <section>
                                <ul>
                                    <li>
                                        <i class="nc-icon nc-air-baloon"></i>
                                        <p>nc-air-baloon</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-album-2"></i>
                                        <p>nc-album-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-alert-circle-i"></i>
                                        <p>nc-alert-circle-i</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-align-center"></i>
                                        <p>nc-align-center</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-align-left-2"></i>
                                        <p>nc-align-left-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-ambulance"></i>
                                        <p>nc-ambulance</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-app"></i>
                                        <p>nc-app</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-atom"></i>
                                        <p>nc-atom</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-badge"></i>
                                        <p>nc-badge</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bag-16"></i>
                                        <p>nc-bag-16</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bank"></i>
                                        <p>nc-bank</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-basket"></i>
                                        <p>nc-basket</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bell-55"></i>
                                        <p>nc-bell-55</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bold"></i>
                                        <p>nc-bold</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-book-bookmark"></i>
                                        <p>nc-book-bookmark</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bookmark-2"></i>
                                        <p>nc-bookmark-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-box-2"></i>
                                        <p>nc-box-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-box"></i>
                                        <p>nc-box</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-briefcase-24"></i>
                                        <p>nc-briefcase-24</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bulb-63"></i>
                                        <p>nc-bulb-63</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bullet-list-67"></i>
                                        <p>nc-bullet-list-67</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-bus-front-12"></i>
                                        <p>nc-bus-front-12</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-button-pause"></i>
                                        <p>nc-button-pause</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-button-play"></i>
                                        <p>nc-button-play</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-button-power"></i>
                                        <p>nc-button-power</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-calendar-60"></i>
                                        <p>nc-calendar-60</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-camera-compact"></i>
                                        <p>nc-camera-compact</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-caps-small"></i>
                                        <p>nc-caps-small</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-cart-simple"></i>
                                        <p>nc-cart-simple</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-chart-bar-32"></i>
                                        <p>nc-chart-bar-32</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-chart-pie-36"></i>
                                        <p>nc-chart-pie-36</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-chat-33"></i>
                                        <p>nc-chat-33</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-check-2"></i>
                                        <p>nc-check-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-circle-10"></i>
                                        <p>nc-circle-10</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-cloud-download-93"></i>
                                        <p>nc-cloud-download-93</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-cloud-upload-94"></i>
                                        <p>nc-cloud-upload-94</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-compass-05"></i>
                                        <p>nc-compass-05</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-controller-modern"></i>
                                        <p>nc-controller-modern</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-credit-card"></i>
                                        <p>nc-credit-card</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-delivery-fast"></i>
                                        <p>nc-delivery-fast</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-diamond"></i>
                                        <p>nc-diamond</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-email-85"></i>
                                        <p>nc-email-85</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-favourite-28"></i>
                                        <p>nc-favourite-28</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-glasses-2"></i>
                                        <p>nc-glasses-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-globe-2"></i>
                                        <p>nc-globe-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-globe"></i>
                                        <p>nc-globe</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-hat-3"></i>
                                        <p>nc-hat-3</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-headphones"></i>
                                        <p>nc-headphones</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-html5"></i>
                                        <p>nc-html5</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-image"></i>
                                        <p>nc-image</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-istanbul"></i>
                                        <p>nc-istanbul</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-key-25"></i>
                                        <p>nc-key-25</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-laptop"></i>
                                        <p>nc-laptop</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-layout-11"></i>
                                        <p>nc-layout-11</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-lock-circle-open"></i>
                                        <p>nc-lock-circle-open</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-map-big"></i>
                                        <p>nc-map-big</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-minimal-down"></i>
                                        <p>nc-minimal-down</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-minimal-left"></i>
                                        <p>nc-minimal-left</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-minimal-right"></i>
                                        <p>nc-minimal-right</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-minimal-up"></i>
                                        <p>nc-minimal-up</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-mobile"></i>
                                        <p>nc-mobile</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-money-coins"></i>
                                        <p>nc-money-coins</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-note-03"></i>
                                        <p>nc-note-03</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-palette"></i>
                                        <p>nc-palette</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-paper"></i>
                                        <p>nc-paper</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-pin-3"></i>
                                        <p>nc-pin-3</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-planet"></i>
                                        <p>nc-planet</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-refresh-69"></i>
                                        <p>nc-refresh-69</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-ruler-pencil"></i>
                                        <p>nc-ruler-pencil</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-satisfied"></i>
                                        <p>nc-satisfied</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-scissors"></i>
                                        <p>nc-scissors</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-send"></i>
                                        <p>nc-send</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-settings-gear-65"></i>
                                        <p>nc-settings-gear-65</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-settings"></i>
                                        <p>nc-settings</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-share-66"></i>
                                        <p>nc-share-66</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-shop"></i>
                                        <p>nc-shop</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-simple-add"></i>
                                        <p>nc-simple-add</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-simple-delete"></i>
                                        <p>nc-simple-delete</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-simple-remove"></i>
                                        <p>nc-simple-remove</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-single-02"></i>
                                        <p>nc-single-02</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-single-copy-04"></i>
                                        <p>nc-single-copy-04</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-sound-wave"></i>
                                        <p>nc-sound-wave</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-spaceship"></i>
                                        <p>nc-spaceship</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-sun-fog-29"></i>
                                        <p>nc-sun-fog-29</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-support-17"></i>
                                        <p>nc-support-17</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tablet-2"></i>
                                        <p>nc-tablet-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tag-content"></i>
                                        <p>nc-tag-content</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tap-01"></i>
                                        <p>nc-tap-01</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tie-bow"></i>
                                        <p>nc-tie-bow</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tile-56"></i>
                                        <p>nc-tile-56</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-time-alarm"></i>
                                        <p>nc-time-alarm</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-touch-id"></i>
                                        <p>nc-touch-id</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-trophy"></i>
                                        <p>nc-trophy</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-tv-2"></i>
                                        <p>nc-tv-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-umbrella-13"></i>
                                        <p>nc-umbrella-13</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-user-run"></i>
                                        <p>nc-user-run</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-vector"></i>
                                        <p>nc-vector</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-watch-time"></i>
                                        <p>nc-watch-time</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-world-2"></i>
                                        <p>nc-world-2</p>
                                    </li>
                                    <li>
                                        <i class="nc-icon nc-zoom-split"></i>
                                        <p>nc-zoom-split</p>
                                    </li>
                                    <!-- list of icons here with the proper class-->
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function SelectText(element) {
            var doc = document,
                text = element,
                range, selection;
            if (doc.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            } else if (window.getSelection) {
                selection = window.getSelection();
                range = document.createRange();
                range.selectNodeContents(text);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
        window.onload = function () {
            var iconsWrapper = document.getElementById('icons-wrapper'),
                listItems = iconsWrapper.getElementsByTagName('li');
            for (var i = 0; i < listItems.length; i++) {
                listItems[i].onclick = function fun(event) {
                    var selectedTagName = event.target.tagName.toLowerCase();
                    if (selectedTagName == 'p' || selectedTagName == 'em') {
                        SelectText(event.target);
                    } else if (selectedTagName == 'input') {
                        event.target.setSelectionRange(0, event.target.value.length);
                    }
                }

                var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""),
                    beforeContent = beforeContentChar.charCodeAt(0).toString(16);
                var beforeContentElement = document.createElement("em");
                beforeContentElement.textContent = "\\" + beforeContent;
                listItems[i].appendChild(beforeContentElement);

                //create input element to copy/paste chart
                var charCharac = document.createElement('input');
                charCharac.setAttribute('type', 'text');
                charCharac.setAttribute('maxlength', '1');
                charCharac.setAttribute('readonly', 'true');
                charCharac.setAttribute('value', beforeContentChar);
                listItems[i].appendChild(charCharac);
            }
        }
    </script>
@endpush