<?php
/**
 * this is the default block template
 * Class td_block_header_17
 */
class td_block_template_17 extends td_block_template {



    /**
     * renders the CSS for each block, each template may require a different css generated by the theme
     * @return string CSS the rendered css and <style> block
     */
    function get_css() {


        // $unique_block_class - the unique class that is on the block. use this to target the specific instance via css
        $unique_block_class =  $this->get_unique_block_class();

        // the css that will be compiled by the block, <style> - will be removed by the compiler
        $raw_css = "
        <style>
           
            /* @style_general_template_17 */
            .td_block_template_17.widget > ul > li {
                margin-left: 0 !important;
            }
            .td_block_template_17 {
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            }
            .td_block_template_17 .td-block-title {
                font-size: 16px;
                font-weight: 500;
                margin: 3px 3px 29px;
                padding: 12px 0 11px;
                line-height: 1;
                position: relative;
                text-align: center;
                border: 1px solid var(--td_header_color, #111);
                background-color: var(--td_theme_color, #fff);
                top: -3px;
            }
            .td_block_template_17 .td-block-title > * {
                color: var(--td_text_header_color, #111);
                margin: 0 15px;
            }
            .td_block_template_17 .td-block-title:before {
                content: '';
                height: 100%;
                position: absolute;
                top: 4px;
                left: -4px;
                right: -4px;
                border: 1px solid var(--td_header_color, #111);
                background-color: var(--td_header_color, #111);
                z-index: -1;
            }
            .td_block_template_17 .td-block-title:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin: 3px auto 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 8px 0 8px;
                border-color: var(--td_header_color, #111) transparent transparent transparent;
            }
            .td_block_template_17 .td-block-title-wrap {
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
                z-index: 2;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter {
                background-color: transparent !important;
                display: inline-block;
                color: #111;
                top: -3px;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-display-option {
                height: 100%;
                display: table;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter i {
                margin-right: 16px;
                color: #111;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-list {
                border-width: 0 1px 1px;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-link {
                padding-right: 32px;
            }
            .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-more {
                vertical-align: middle;
                display: table-cell;
                padding: 0;
                opacity: 0.8;
            }
            @media (max-width: 767px) {
                .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-more {
                    padding-right: 5px;
                }
                .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-more span {
                    display: none;
                }
            }
            .td_block_template_17.widget,
            .td_block_template_17.td_block_social_counter {
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            }
            .td_block_template_17 .td-related-title a {
                margin-right: 10px;
                margin-left: 10px;
            }
            @media (max-width: 767px) {
                .td_block_template_17 .td-related-title a {
                    margin: 0 8px !important;
                    font-size: 14px;
                }
            }
            .td_block_template_17 .td-related-title .td-cur-simple-item {
                color: var(--td_theme_color, #4db2ec);
            }
            .td-pb-span4 .td_block_template_17 .td-block-title-wrap .td-pulldown-more {
                padding-right: 5px;
            }
            .td-pb-span4 .td_block_template_17 .td-block-title-wrap .td-pulldown-more span {
                display: none;
            }
            .td-pb-span4 .td_block_template_17 .td-block-title-wrap .td-wrapper-pulldown-filter .td-pulldown-filter-link {
                padding-right: 22px;
                padding-left: 26px;
            }
            
            

            /* @header_color */
            .$unique_block_class .td-block-title {
                background-color: @header_color !important;
            }

            /* @top_border_color */
            .$unique_block_class .td-block-title {
                border-color: @top_border_color !important;
            }

            /* @bottom_border_color */
            .$unique_block_class .td-block-title:before {
                border-color: @bottom_border_color !important;
                background-color: @bottom_border_color !important;
            }
            .$unique_block_class .td-block-title:after {
                border-color: @bottom_border_color transparent transparent transparent !important;
            }

            /* @accent_text_color */
            .$unique_block_class .td_module_wrap:hover .entry-title a,
            .$unique_block_class .td_quote_on_blocks,
            .$unique_block_class .td-opacity-cat .td-post-category:hover,
            .$unique_block_class .td-opacity-read .td-read-more a:hover,
            .$unique_block_class .td-opacity-author .td-post-author-name a:hover,
            .$unique_block_class .td-instagram-user a,
            .$unique_block_class .td-pulldown-filter-item .td-cur-simple-item,
            .$unique_block_class .td-pulldown-filter-link:hover,
            .$unique_block_class .td-pulldown-filter-display-option:hover,
            .$unique_block_class .td-pulldown-filter-display-option:hover i {
                color: @accent_text_color !important;
            }

            .$unique_block_class .td-next-prev-wrap a:hover,
            .$unique_block_class .td-load-more-wrap a:hover {
                background-color: @accent_text_color !important;
                border-color: @accent_text_color !important;
            }

            .$unique_block_class .td-read-more a,
            .$unique_block_class .td-weather-information:before,
            .$unique_block_class .td-weather-week:before,
            .$unique_block_class .td-exchange-header:before,
            .td-footer-wrapper .$unique_block_class .td-post-category,
            .$unique_block_class .td-post-category:hover {
                background-color: @accent_text_color !important;
            }
            
            /* @header_text_color */
            .$unique_block_class .td-block-title > *,
            .$unique_block_class .td-pulldown-filter-item .td-cur-simple-item,
            .$unique_block_class .td-pulldown-filter-link:hover,
            .$unique_block_class .td-pulldown-filter-display-option:hover,
            .$unique_block_class .td-pulldown-filter-display-option:hover i {
                color: @header_text_color !important;
            }
        </style>
    ";

        $td_css_compiler = new td_css_compiler(self::get_common_css() . $raw_css );

        /*-- GENERAL -- */
        $td_css_compiler->load_setting_raw( 'style_general_template_17', 1 );

        // check if we have pulldown categories for css
        $td_pull_down_items = $this->get_td_pull_down_items();
        if (!empty($td_pull_down_items)) {
            $td_css_compiler->load_setting_raw('style_general_pulldown', 1);
        }

        $td_css_compiler->load_setting_raw('header_color', $this->get_att('header_color'));
        $td_css_compiler->load_setting_raw('header_text_color', $this->get_att('header_text_color'));
        $td_css_compiler->load_setting_raw('top_border_color', $this->get_att('top_border_color'));
        $td_css_compiler->load_setting_raw('bottom_border_color', $this->get_att('bottom_border_color'));
        $td_css_compiler->load_setting_raw('accent_text_color', $this->get_att('accent_text_color'));

        $compiled_style = $td_css_compiler->compile_css();


        return $compiled_style;
    }


    /**
     * renders the block title
     * @return string HTML
     */
    function get_block_title() {

        $custom_title = $this->get_att('custom_title');
        $custom_url = $this->get_att('custom_url');
        $title_tag = 'h4';

        // title_tag used only on Title shortcode
        $block_title_tag = $this->get_att('title_tag');
        if(!empty($block_title_tag)) {
            $title_tag = $block_title_tag ;
        }

        if (empty($custom_title)) {
            $td_pull_down_items = $this->get_td_pull_down_items();
            if (empty($td_pull_down_items)) {
                //no title selected and we don't have pulldown items
                return '';
            }
            // we don't have a title selected BUT we have pull down items! we cannot render pulldown items without a block title
            $custom_title = 'Block title';
        }


        // there is a custom title
        $buffy = '';
        $buffy .= '<' . $title_tag . ' class="td-block-title">';
        if (!empty($custom_url)) {
            $buffy .= '<a href="' . esc_url($custom_url) . '">' . esc_html($custom_title) . '</a>';
        } else {
            $buffy .= '<span>' . esc_html($custom_title) . '</span>';
        }
        $buffy .= '</' . $title_tag . '>';
        return $buffy;
    }


    /**
     * renders the filter of the block
     * @return string
     */
    function get_pull_down_filter() {
        $buffy = '';

        $td_pull_down_items = $this->get_td_pull_down_items();
        if (empty($td_pull_down_items)) {
            return '';
        }

        $buffy .= '<div class="td-wrapper-pulldown-filter">';
            $buffy .= '<div class="td-pulldown-filter-display-option">';


                //show the default display value
                $buffy .= '<div id="td-pulldown-' . $this->get_block_uid() . '-val" class="td-pulldown-more"><span>';
                $buffy .=  $td_pull_down_items[0]['name'] . ' </span><i class="td-icon-menu-down"></i>';
                $buffy .= '</div>';

                //builde the dropdown
                $buffy .= '<ul class="td-pulldown-filter-list">';
                foreach ($td_pull_down_items as $item) {
                    $buffy .= '<li class="td-pulldown-filter-item"><a class="td-pulldown-filter-link" id="' . td_global::td_generate_unique_id() . '" data-td_filter_value="' . $item['id'] . '" data-td_block_id="' . $this->get_block_uid() . '" href="#">' . $item['name'] . '</a></li>';
                }
                $buffy .= '</ul>';

            $buffy .= '</div>';  // /.td-pulldown-filter-display-option
        $buffy .= '</div>';

        return $buffy;
    }
}
