<?php
$id = $block['id'];
$class = [];

if($block['align']){
    $class[] = 'align'.$block['align'];
}

$first_background_colour = get_field('first_background_colour');
$first_text_colour = get_field('first_text_colour');
$first_heading = get_field('first_heading');
$first_heading_icon = get_field('first_heading_icon');
$second_background_colour = get_field('second_background_colour');
$second_text_colour = get_field('second_text_colour');
$second_heading = get_field('second_heading');
$second_heading_icon = get_field('second_heading_icon');

$class[] = $layout;

$html = '';

$html .= '<div id="'.$id.'" class="'.implode(' ', $class).'">';
    $html .= '<div class="z-two-column-wrapper clearfix">';
        $html .= '<div class="column">';
            $html .= '<h2 class="heading"><a href="'.$first_heading['url'].'" target="'.$first_heading['target'].'">'.$first_heading_icon.$first_heading['title'].'</a></h2>';
        $html .= '</div>';
        $html .= '<div class="column">';
            $html .= '<h2 class="heading"><a href="'.$second_heading['url'].'" target="'.$second_heading['url'].'">'.$second_heading_icon.$second_heading['title'].'</a></h2>';
        $html .= '</div>';
    $html .= '</div>';
$html .= '</div>';
$html .= '<style>';
$html .= '#'.$id.' .column{background-color: '.$first_background_colour.';}';
$html .= '#'.$id.' .column .heading{color: '.$first_text_colour.';}';
$html .= '#'.$id.' .column .heading a:hover{color: '.$first_text_colour.';}';
$html .= '#'.$id.' .column:last-of-type{background-color: '.$second_background_colour.';}';
$html .= '#'.$id.' .column:last-of-type .heading{color: '.$second_text_colour.';}';
$html .= '#'.$id.' .column:last-of-type .heading a:hover{color: '.$second_text_colour.';}';
$html .= '</style>';
echo $html;
