{{layout/logo-heading
	title="Trello"
	desc="Trello is the visual way to manage your projects and organize anything (https://trello.com)"
	icon=constants.Icon.Integrations}}

{{#section/base-editor document=document folder=folder page=page busy=busy
	isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}

	{{#if trelloConfigured}}
		{{#if authenticated}}
			{{#if noBoards}}
				<p>You have no team boards to share - personal boards are never shown</p>
			{{else}}
				<div class="form-group">
					<label>Select Board</label>
					{{ui/ui-select id="boards-dropdown" content=boards action=(action "onBoardChange") optionValuePath="id" optionLabelPath="name" selection=config.board}}
				</div>
				<div class="form-group">
					<label for="airtable-embed-cod">Select Lists</label>
					<div class="section-trello-board" style= {{boardStyle}}>
						<div class="section-trello-board-title">{{config.board.name}}</div>
						{{#each config.lists as |list|}}
							<div class="section-trello-list" {{action "onListCheckbox" list.id}}>
								{{#if list.included}}
									<i class="section-trello-list-checkbox dicon {{constants.Icon.CheckboxChecked}}" />
								{{else}}
									<i class="section-trello-list-checkbox dicon {{constants.Icon.Checkbox}}" />
								{{/if}}
								<span class="trello-list-title">{{list.name}}</span>
							</div>
						{{/each}}
						<div class="clearfix" />
					</div>
				</div>
			{{/if}}
		{{else}}
			{{ui/ui-button color=constants.Color.Green light=true
				label=constants.Label.Authenticate onClick=(action "auth")}}
		{{/if}}
	{{else}}
		{{#if session.isGlobalAdmin}}
			{{#link-to "customize.integrations"}}
				{{ui/ui-button color=constants.Color.Yellow light=true
					label="Configure Trello Connector"}}

			{{/link-to}}
		{{else}}
			<p>Your Documize administrator needs to configure Trello before usage.</p>
		{{/if}}
	{{/if}}

{{/section/base-editor}}