{{template "devtest/devtest-header"}}
<div class="page-content devtest">
	<div class="ui container">
		<h3>Flex List (standalone)</h3>
		<div class="divider"></div>
		<div class="flex-divided-list items-with-main">
			<div class="item">
				<div class="item-leading">
					{{svg "octicon-info" 32}}
				</div>
				<div class="item-main">
					<div class="item-title">
						Flex Item
						<span class="ui basic label">
							with label
						</span>
					</div>
					<div class="item-body">
						consists of leading/main/trailing part
					</div>
					<div class="item-body">
						main part contains title and (multiple) body lines
					</div>
				</div>
				<div class="item-trailing">
					<button class="ui tiny red button">
						{{svg "octicon-alert" 14}} CJK文本测试
					</button>
					<button class="ui tiny primary button">
						{{svg "octicon-info" 14}} Button
					</button>
					<button class="ui tiny primary button">
						Button with long text
					</button>
				</div>
			</div>

			<div class="item">
				<div class="item-leading">
					{{svg "octicon-info" 32}}
				</div>
				<div class="item-main">
					<div class="item-title">
						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
					</div>
					<div class="item-body">
						consists of leading/main/trailing part
					</div>
					<div class="item-body">
						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
						<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
					</div>
				</div>
				<div class="item-trailing">
					<button class="ui tiny red button">
						{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
					</button>
				</div>
			</div>

			<div class="item">
				<div class="item-leading">
					{{svg "octicon-repo" 32}}
				</div>
				<div class="item-main">
					<div class="item-header">
						<div class="item-title">
							<a class="tw-text-primary" href="{{$.Link}}">
								gitea-org / gitea
							</a>
							<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
						</div>
						<div class="item-trailing">
							<a class="muted" href="{{$.Link}}">
								<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
							</a>
							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
						</div>
					</div>
					<div class="item-body">
						when inside header, the trailing part will wrap below the title
					</div>
				</div>
			</div>
		</div>

		<div class="divider"></div>

		<h3>Flex List (with "ui segment")</h3>
		<div class="ui attached segment">
			<div class="flex-divided-list">
				<div class="item">item 1</div>
				<div class="item">item 2</div>
			</div>
		</div>
		<div class="ui attached segment">
			<h4>segment header</h4>
			<div class="flex-divided-list">
				<div class="item">item 1</div>
				<div class="item">item 2</div>
			</div>
		</div>
		<h3>Flex List (with "ui segment fitted", items have their own padding)</h3>
		<div class="ui fitted segment">
			<div class="flex-divided-list items-px-default">
				<div class="item">item 1</div>
				<div class="item">item 2</div>
				<div class="item">item 3</div>
			</div>
		</div>

		<h3>If parent provides padding or items need their own flex and/or padding:</h3>
		<div class="tw-border tw-border-secondary">
			<div class="tw-m-3">before divider</div>
			<div class="divider"></div>
			<div class="flex-divided-list flex-items-block items-px-default">
				<div class="item">item 1</div>
				<div class="item">item 2</div>
			</div>
			<div class="divider"></div>
			<div class="tw-m-3">after divider</div>
		</div>
		<div class="tw-border tw-border-secondary tw-p-4 tw-my-2">
			<div>before divider</div>
			<div class="divider"></div>
			<div class="flex-divided-list">
				<div class="item">item 1</div>
				<div class="item">item 2</div>
			</div>
			<div class="divider"></div>
			<div>after divider</div>
		</div>
	</div>
</div>
{{template "devtest/devtest-footer"}}