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

$data = $api->get( array(
	'prices'          => array(),
	'logo'            => 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;

	?>
	<div class='bs-fp bs-fp-25 bs-fp-t18 bs-fp-s0'>

		<div class="bs-fp-inner">
			<div class="chart-text">

				<?php if ( ! empty( $item['logo'] ) ) { ?>
					<div class="fp-logo">
						<img src="<?php echo $item['logo'] ?>">
					</div>
				<?php } ?>

				<div class="fp-name" title="<?php echo $title_attr; ?>"><?php echo $item['name']; ?></div>

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

				<?php if ( isset( $item['prices'][ $currency ] ) ) { ?>
					<div class="fp-price"><?php echo bsfp_format_currency( $item['prices'][ $currency ], $currency ); ?></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-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 }