<div class="td-icon-modal-content">
    <div id="cb-cloud-menu">
        <div class="fixed top">
            <div class="icons-input">
				<?php dashboard_icon( 'search-regular' ); ?>
                <input type="text" class="tvd-search-icon keyup click" data-fn="searchIcon"
                       data-fn-click="focusSearch" data-source="search"
                       placeholder="<?php echo esc_html__( 'Search', 'thrive-dash' ); ?>"/>
				<?php dashboard_icon( 'close2', false, 'sidebar', 'click tvd-hidden', array( 'data-fn' => 'domClearSearch' ) ); ?>
            </div>
        </div>
        <div class="icons-menu-wrapper">
            <div class="icons-label-wrapper p-10 pl-20">
                <span class="icons-label"><?php echo __( 'Icon style', 'thrive-dash' ); ?></span>
                <span class="separator"></span>
            </div>
            <div class="td-icon-styles td-icon-filters">
                <div class="td-icon-pack click mt-5 tvd-selected td-icon-default-style" data-fn="filterByStyle">
                    <span><?php echo __( 'All ', 'thrive-dash' ) ?></span></div>
            </div>
            <div class="icons-label-wrapper p-10 pl-20">
                <span class="icons-label"><?php echo __( 'Icon packs', 'thrive-dash' ); ?></span>
                <span class="separator"></span>
            </div>
            <div class="td-icon-packs td-icon-filters">

            </div>
        </div>
        <div class="fixed bottom mt-10 mb-10">
            <div class="td-icon-settings click pr-10 mb-10 mt-10 pl-20" data-fn="showSettings">
                <hr>
                <div class="pt-10 pb-10 icons-wrapper">
					<?php dashboard_icon( 'cog-light' ); ?>
                    <span class="icons-label"><?php echo __( 'Manage icon packs', 'thrive-dash' ) ?></span>
					<?php dashboard_icon( 'exclamation-circle-solid', false, 'sidebar', 'kit-warning', [
						"data-tooltip" => "Something is wrong with your Font Awesome setup, click here to resolve",
						"data-side"    => "top",
						"data-width"   => "15%"
					] ); ?>
                </div>
                <hr>
            </div>
        </div>
    </div>
    <div id="td-icon-content">
        <span class="icons-title pl-10"><?php echo __( 'Icon library', 'thrive-dash' ); ?></span>
        <div class="choose-icon mr-30 pl-10">
            <span><?php echo __( 'Choose an icon', 'thrive-dash' ); ?></span>
            <span class="td-icons-number"></span>
        </div>
        <div id="icon-pack-content" class="mt-10">
            <div class="td-icons-wrapper pt-5">
                <div class="td-icons-before" style="height: 4000px;"></div>
                <div class="td-icons-rendered"></div>
                <div class="td-icons-after"></div>
            </div>
        </div>
        <div class="td-modal-footer flex-end pr-40">
            <button type="button" class="tvd-right tvd-button medium tvd-modal-save">
				<?php echo __( 'Select', 'thrive-dash' ); ?>
            </button>
        </div>
    </div>
    <div id="td-icon-settings" class="tvd-hidden">
        <div class="tvd-fa-pro-settings">
            <span class="icons-title mb-35"><?php echo __( 'Font Awesome Pack', 'thrive-dash' ); ?></span>
            <span>
				<?php echo __( 'To enable Font Awesome Pro icons, paste your kit ID or script below. Once your kit has been accepted, your new icons will be available under the matching filters.', 'thrive-dash' ); ?>
			</span>
            <a href="https://thrivethemes.com/tkb_item/how-to-add-font-awesome-pro-icons-in-thrive-architect/"
               target="_blank"
               class="mt-15 mb-15"><?php echo __( 'Learn how to use Font Awesome Pro here', 'thrive-dash' ); ?></a>

            <div class="icons-input white tvd-fa-input pr-0">
                <input type="text" class="change input tvd-fa-kit" data-fn="toggleProSettings"
                       placeholder="<?php echo __( 'Add your Font Awesome Pro Kit', 'thrive-dash' ); ?>">
				<?php dashboard_icon( 'check-regular', false, 'sidebar', 'click tvd-hidden kit-action', array( 'data-fn' => 'handlePro' ) ); ?>
				<?php dashboard_icon( 'trash-alt-light', false, 'sidebar', 'click tvd-hidden kit-action', array( 'data-fn' => 'toggleDeletePro' ) ); ?>
            </div>
            <div class="icons-input tvd-fa-warning tvd-hidden pr-0">
                <span><?php echo __( 'Are you sure you want to delete your kit?', 'thrive-dash' ); ?></span>
                <span class="mr-10 click kit-action"
                      data-fn="clearFAPro"><?php echo __( 'YES', 'thrive-dash' ); ?></span>
                <span class="click kit-action"
                      data-fn="toggleProInput"><?php echo __( 'CANCEL', 'thrive-dash' ); ?></span>
            </div>
            <div class="kit-warning kit-warning-message">
                <div class="warning-title">
					<?php dashboard_icon( 'exclamation-circle-solid' ) ?>
					<?php echo __( 'There was an issue accessing your Font Awesome Pro Kit', 'thrive-dash' ); ?>
                </div>
                <div class="warning-description">
					<?php echo __( 'This usually occurs when your kit was deleted or you do not have an active subscription. Please check your Font Awesome account and update the above kit details as required.', 'thrive-dash' ); ?>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include TVE_DASH_PATH . '/css/font/icon-library.svg'; ?>
