{namespace e=TYPO3\Expose\ViewHelpers}

<section role="claim">
	<div class="open-claim">
		<div class="open-claim-head {claim.currentState}">
			<h3>{f:translate(value: 'Receivable')} <span>{claim.externalReference}</span>
				<small class="pull-right current-state"><i class="fa fa-dot-circle-o"></i> {claim.currentState.state -> f:translate()}</small>
			</h3>
		</div>
		<div class="open-claim-body">
			<div class="row">
				<div class="col-sm-8">
					<div class="row">
						<div class="col-sm-6">
							<div class="wrapper">
								<p class="label">{f:translate(value: 'Owner')}</p>
								<div class="value">
									<f:render partial="User" arguments="{team: claim.creditor}" />
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="wrapper">
								<p class="label">{f:translate(value: 'Debtor')}</p>
								<div class="value">
									<f:render partial="User" arguments="{team: claim.debtor}" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<f:render partial="Claim" arguments="{claim: claim}" />
				</div>
			</div>
		</div>

		<f:if condition="{claim.debtor} == {user.team}">
			<button type="submit" class="btn btn-danger reject"  data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> {f:translate(value: 'Reject')}</button>
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
			    	<div class="modal-content">
			      		<div class="modal-body">
			        		<h3>
			        			<f:translate id="reject-claim-confirmation" arguments="{0: claim.externalReference}"><![CDATA[
			        				Are you sure, that you want to reject the payable #{0}?
			        			]]></f:translate>
			        		</h3>
			        		<f:form action="reject" method="post" arguments="{claim: claim}">
								<button type="submit" class="btn btn-success " id="reject-claim"><i class="fa fa-check"></i>{f:translate(value: 'Yes, reject this')}</button>
							</f:form>
			      			<button type="button" class="btn btn-danger " data-dismiss="modal">{f:translate(value: 'No')}</button>
			      		</div>
			    	</div>
			  	</div>
			</div>

			<f:form action="bpo" method="post" class="pull-left" arguments="{claim: claim}">
				<button type="submit" class="btn btn-info bpo" id="accept-claim"><i class="fa fa-check"></i> {f:translate(value: 'BPO-accepted')}</button>
			</f:form>

			<f:form action="accept" method="post" arguments="{claim: claim}">
				<button type="submit" class="btn btn-success accept" id="accept-claim"><i class="fa fa-check"></i> {f:translate(value: 'accept')}</button>
			</f:form>
		</f:if>

	</div>

</section>

<hr />
<section role="comments">
	<div class="wrapper new-comment">
		<h3>{f:translate(value: 'Comments')}</h3>
		<f:for each="{claim.comments}" as="comment" iteration="iteration">
		<!-- even odd feature -->
			<div class="media">
			  <div class="pull-left">
			    {comment.user}
				<br /><small>
				{comment.date -> f:format.date(forceLocale: true)}
				<br />
			    #{iteration.cycle} </small>
			  </div>
			  <div class="media-body">
			    {comment.message}
			  </div>
			</div>
		</f:for>
	</div>
	<div class="wrapper new-comment">
		<h4>{f:translate(value: 'New comment')}</h4>
		<f:form action="comment" method="post" arguments="{claim: claim}" class="form-horizontal">
		    <f:form.textarea name="comment" class="form-control square" rows="3" />
			<button type="submit" class="btn btn-default square pull-right">{f:translate(value: 'Submit')}</button>
		</f:form>
	</div>
</section>

<section role="history">
	<h3>{f:translate(value: 'History')}</h3>
	<table class="table table-striped">
		<f:for each="{claim.states}" as="state">
		<tr>
			<td>{state.state -> f:translate()}</td>
			<td>{state.date -> f:format.date(forceLocale: true)}</td>
		</tr>
		</f:for>
	</table>
</section>