<?php
/**
 * Type 12 => Style 0
 *
 * @var $atts
 * @var $api
 */

$data = $api->get( array(
	'prices'          => array(),
	'changes_average' => array(),
	'daily_history'   => array(),
) );

if ( empty( $data ) ) {

	bsfp_print_error();

	return;
}

foreach ( $data as $symbol => $item ) {

	$currency   = $item['main_currency'];
	$title_attr = $symbol;
	$_check     = array(
		'currency'     => '',
		'stock-market' => '',
	);

	if ( isset( $_check[ $atts['data-type'] ] ) ) {
		$name       = $symbol;
		$title_attr = $item['name'];
	} else {
		$name = $item['name'];
	}

	?>
	<div class='bs-fp bs-fp-19 bs-fp-t12 bs-fp-s0'>
		<div class="bs-fp-inner">

			<div class="fp-name" title="<?php echo $title_attr; ?>"><?php echo $name; ?></div>
			<div class="chart-text">

				<?php if ( isset( $item['prices'][ $currency ] ) ) { ?>
					<div class="fp-price fp-<?php echo @$item['changes_average'][ $currency ]['state']; ?>">
						<?php echo bsfp_format_currency( $item['prices'][ $currency ], $currency ); ?>
					</div>
				<?php } ?>

				<?php if ( ! empty( $item['changes_average'][ $currency ] ) ) { ?>
					<?php if ( $arrow = bsfp_get_arrow_class( $item, $currency, 'style-3' ) ) {
						?>
						<span class="fp-arrow fp-<?php echo $item['changes_average'][ $currency ]['state']; ?> <?php echo $arrow; ?>"></span>
						<?php
					} ?>
					<div class="fp-changes fp-changes-percentage fp-<?php echo $item['changes_average'][ $currency ]['state']; ?>">
						<?php echo bsfp_format_percentage( $item['changes_average'][ $currency ]['percentage'], 2 ); ?>
					</div>
				<?php } ?>
			</div>


			<?php if ( isset( $item['daily_history'][ $currency ] ) ) { ?>
				<div class="visualization">
					<div class="ct-chart bs-fp-chart-list fp-<?php echo ! empty( $item['changes_average'][ $currency ] ) ? $item['changes_average'][ $currency ]['state'] : 'fixed'; ?>"
					     data-series="<?php echo implode( ',', $item['daily_history'][ $currency ] ) ?>"
					     data-width="86px"
					     data-height="36px"
					></div>
				</div>
			<?php } ?>
			<div class="bs-fp-gradient">
				<svg width="0" height="0">
					<?php if ( $atts['scheme'] === 'dark' ) { ?>
						<defs>
							<linearGradient id="gradient-up" x1="0%" y1="-120%" x2="0%" y2="140%">
								<stop offset="60%" stop-color="#0adb67"/>
								<stop offset="100%" stop-color="transparent"/>
							</linearGradient>
							<linearGradient id="gradient-down" x1="0%" y1="-200%" x2="0%" y2="140%">
								<stop offset="70%" stop-color="#de3034"/>
								<stop offset="100%" stop-color="transparent"/>
							</linearGradient>
							<linearGradient id="gradient-fixed" x1="0%" y1="-80%" x2="0%" y2="160%">
								<stop offset="60%" stop-color="#ffffff"/>
								<stop offset="100%" stop-color="transparent"/>
							</linearGradient>
						</defs>
					<?php } else { ?>
						<defs>
							<linearGradient id="gradient-up" x1="0%" y1="0%" x2="0%" y2="100%">
								<stop offset="60%" stop-color="#1abe63"/>
								<stop offset="100%" stop-color="#ffffff"/>
							</linearGradient>
							<linearGradient id="gradient-down" x1="0%" y1="0%" x2="0%" y2="100%">
								<stop offset="60%" stop-color="#d70206"/>
								<stop offset="100%" stop-color="#ffffff"/>
							</linearGradient>
							<linearGradient id="gradient-fixed" x1="0%" y1="0%" x2="0%" y2="100%">
								<stop offset="60%" stop-color="#818181"/>
								<stop offset="100%" stop-color="#ffffff"/>
							</linearGradient>
						</defs>
					<?php } ?>
				</svg>
			</div>

		</div>
	</div>
<?php }