@extends("/_layouts/unit.html")

@section(image-unit)
<!-- 画像 -->
<div class="column-image-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front --><!-- BEGIN_IF [{url}/nem/] -->
	<a href="{url}"{viewer}[raw] data-caption="{caption}[nl2br|delnl]"><!-- END_IF --><!-- END link#front -->
		<amp-img class="columnImage"
			 src="%{HTTP_ROOT}{path}"
			 alt="{alt}[delnl]"
			 width="{x}"
			 height="{y}"
			 layout="responsive" style="max-width: {x}px;"></amp-img><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>
@endsection


@section(file-unit)
<!-- ファイル -->
<div class="column-file-{align} js_notStyle">
	<a href="%{HTTP_ROOT}{path}"><amp-img class="columnIcon" src="%{HTTP_ROOT}{icon}" alt="ファイルを開く" width="{x}" height="{y}" layout="fixed"></amp-img></a>
	<!-- BEGIN_IF [{caption}[delnl]/nem] --><p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>
@endsection


@section(osmap-unit)
<!-- Open Street Map -->
<div class="column-map-{align}{display_size_class}"{display_size}[raw]>
	<a href="https://www.openstreetmap.org/#map={zoom}/{lat}/{lng}" class="acms-btn acms-btn-large" target="_blank">別ページで地図を表示</a>
</div>
@endsection


@section(map-unit)
<!-- Google Maps -->
<div class="column-map-{align}{display_size_class}"{display_size}[raw]>
	<div class="acms-margin-bottom-small">
		<amp-img src="https://maps.googleapis.com/maps/api/staticmap?center={lat},{lng}&zoom={zoom}&size={x}x{y}&maptype=roadmap&markers={lat},{lng}&key=%{GOOGLE_API_KEY}" alt="{msg}" width="{x}" height="{y}" layout="responsive" title="クリックで地図が動かせるようになります。">
	</div>
	<a href="https://www.google.com/maps/@{lat},{lng},{zoom}z" class="acms-btn" target="_blank">別ページで地図を表示</a>
</div>
@endsection


@section(youtube-unit)
<!-- YouTube -->
<div class="column-youtube-{align}{display_size_class}"{display_size}[raw]>
	<amp-youtube width="480" height="270" data-videoid="{youtubeId}" layout="responsive"></amp-youtube>
</div>
@endsection


@section(video-unit)
<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
	<amp-youtube width="480" height="270" data-videoid="{videoId}" layout="responsive"></amp-youtube>
</div>
@endsection



@section(eximage-unit)
<!-- 画像URL -->
<div class="column-eximage-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<amp-img class="columnImage"
			 src="{normal}"
			 alt="{alt}"
			 width="{x}"
			 height="{y}"
			 layout="responsive"
			 style="max-width: {x}px;"></amp-img><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->
</div>
@endsection



@section(media-unit)
<!-- media -->
<div class="column-media-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN type#image -->
	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<amp-img class="columnImage"
			 src="%{HTTP_ROOT}{path}"
			 alt="{alt}"
			 width="{x}"
			 height="{y}"
			 layout="responsive"
			 style="max-width: {x}px;"></amp-img><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->

	<!-- END type#image --><!-- BEGIN type#svg -->

	<!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<amp-img class="columnImage"
			 src="%{HTTP_ROOT}{path}"
			 alt="{alt}"
			 width="{x}"
			 height="{y}"
			 style="max-width: {x}px;"></amp-img><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[raw|nl2br]</p><!-- END_IF -->

	<!-- END type#svg --><!-- BEGIN type#file --><div>
	<a href="{url}" target="_blank"><!-- BEGIN_IF [{thumbnail}/nem/_and_/{use_icon}/neq/yes] -->
		<amp-img class="column-pdf-image" src="%{MEDIA_ARCHIVES_DIR}{thumbnail}" alt="{alt}" width="597" height="{thumbnail}[imageRatioSizeH(597)]" layout="responsive"></amp-img>
		<!-- ELSE -->
		<amp-img class="columnIcon" src="%{HTTP_ROOT}{icon}" alt="{alt}" width="{x}" height="{y}" layout="fixed"></amp-img>
		<!-- END_IF -->
	</a></div>
	<!-- BEGIN_IF [{caption}[delnl]/nem] -->
	<p class="caption">{caption}[raw|nl2br]</p>
	<!-- END_IF -->
	<!-- END type#file -->
</div>
@endsection


@section(quote-unit)
<!-- 引用 -->
<div class="column-quote-{align}"{display_size}[raw]><!-- BEGIN html:veil -->
	{quote_html}[raw]<!-- END html:veil --><!-- BEGIN_IF [{quote_title}/nem/] -->
	<blockquote class="js-biggerlink"><!-- BEGIN image:veil -->
		<div class="quoteImageContainer">
			<amp-img src="{quote_image}" class="quoteImage" width="100" height="{quote_image}[imageRatioSizeH(100)]" alt="" layout="responsive" style="max-width: 154px;"></amp-img>
		</div><!-- END image:veil -->
		<div>
			<p class="quoteTitle"><a href="{quote_url}" class="quoteTitleLink">{quote_title}</a></p><!-- BEGIN site_name:veil -->
			<p class="quoteSiteName">{quote_site_name}</p><!-- END site_name:veil --><!-- BEGIN description:veil -->
			<p class="quoteDescription">{quote_description}[raw|trim(180, '...')]</p><!-- END description:veil -->
		</div>
		<hr class="clearHidden">
	</blockquote><!-- END_IF -->
</div>
@endsection


@section(extend-unit)
@include("/include/unit/extend-amp.html")
@endsection
