<div class="ui grid">
	{{if .Flash}}
	<div class="sixteen wide column">
  	{{template "base/alert" .}}
  </div>
  {{end}}
  <div class="sixteen wide column title">
		<h1><span class="index">#{{.Issue.Index}}</span> {{.Issue.Name}}</h1>
		{{if .Issue.IsClosed}}
		<div class="ui red large label"><i class="octicon octicon-issue-closed"></i> {{.i18n.Tr "repo.issues.closed_title"}}</div>
		{{else}}
		<div class="ui green large label"><i class="octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues.open_title"}}</div>
		{{end}}
		{{ $createdStr:= TimeSince .Issue.Created $.Lang }}
		<span class="time-desc">
			{{if gt .Issue.Poster.Id 0}}
			{{$.i18n.Tr "repo.issues.opened_by" $createdStr .Issue.Poster.Name | Safe}}
			{{else}}
			{{$.i18n.Tr "repo.issues.opened_by_fake" $createdStr .Issue.Poster.Name | Safe}}
			{{end}}
			ยท
			{{$.i18n.Tr "repo.issues.num_comments" .Issue.NumComments}}
		</span>
  	<div class="ui divider"></div>
  </div>
	<div class="twelve wide column comment-list">
  	<ui class="ui comments">
  		<div class="comment">
		    <a class="avatar" {{if gt .Issue.Poster.Id 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
		      <img src="{{.Issue.Poster.AvatarLink}}">
		    </a>
		    <div class="content">
					<div class="ui top attached header">
						<span class="text grey"><a {{if gt .Issue.Poster.Id 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.Name}}</a> {{.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}}</span>
					  <div class="ui right actions">
					  </div>
					</div>
			    <div class="ui attached segment markdown">
			    	{{if .Issue.RenderedContent}}
						{{.Issue.RenderedContent|Str2html}}
			    	{{else}}
						<span class="no-content">{{.i18n.Tr "repo.issues.no_content"}}</span>
			    	{{end}}
	  			</div>
	  			{{if .Issue.Attachments}}
					<div class="ui bottom attached segment">
						<div class="ui small images">
							{{range .Issue.Attachments}}
						  <a target="_blank" href="/attachments/{{.UUID}}"><img class="ui image" src="/attachments/{{.UUID}}"></a>
						  {{end}}
						</div>
					</div>
	  			{{end}}
		    </div>
  		</div>

  		{{range .Issue.Comments}}
  		{{ $createdStr:= TimeSince .Created $.Lang }}

			<!-- 0 = COMMENT, 1 = REOPEN, 2 = CLOSE, 3 = ISSUE_REF, 4 = COMMIT_REF, 5 = COMMENT_REF, 6 = PULL_REF -->
			{{if eq .Type 0}}
  		<div class="comment">
		    <a class="avatar" {{if gt .Poster.Id 0}}href="{{.Poster.HomeLink}}"{{end}}>
		      <img src="{{.Poster.AvatarLink}}">
		    </a>
		    <div class="content">
					<div class="ui top attached header">
						<span class="text grey"><a {{if gt .Poster.Id 0}}href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.Name}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
					  <div class="ui right actions">
					  	{{if gt .ShowTag 0}}
					  	<div class="tag">
					  	{{if eq .ShowTag 1}}
							{{$.i18n.Tr "repo.issues.poster"}}
					  	{{else if eq .ShowTag 2}}
							{{$.i18n.Tr "repo.issues.admin"}}
					  	{{else if eq .ShowTag 3}}
							{{$.i18n.Tr "repo.issues.owner"}}
					  	{{end}}
					  	</div>
					  	{{end}}
					  </div>
					</div>
			    <div class="ui attached segment markdown">
			    	{{if .RenderedContent}}
						{{.RenderedContent|Str2html}}
			    	{{else}}
						<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
			    	{{end}}
	  			</div>
	  			{{if .Attachments}}
					<div class="ui bottom attached segment">
						<div class="ui small images">
							{{range .Attachments}}
						  <a target="_blank" href="/attachments/{{.UUID}}"><img class="ui image" src="/attachments/{{.UUID}}"></a>
						  {{end}}
						</div>
					</div>
	  			{{end}}
		    </div>
  		</div>
  		{{else if eq .Type 1}}
  		<div class="event">
  			<span class="octicon octicon-primitive-dot"></span>
  			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
  			  <img src="{{.Poster.AvatarLink}}">
  			</a>
  			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.Name}}</a> {{$.i18n.Tr "repo.issues.reopened_at" .EventTag $createdStr | Safe}}</span>
  		</div>
  		{{else if eq .Type 2}}
  		<div class="event">
  			<span class="octicon octicon-circle-slash"></span>
  			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
  			  <img src="{{.Poster.AvatarLink}}">
  			</a>
  			<span class="text grey"><a href="{{.Poster.HomeLink}}">{{.Poster.Name}}</a> {{$.i18n.Tr "repo.issues.closed_at" .EventTag $createdStr | Safe}}</span>
  		</div>
			{{end}}

  		{{end}}

			{{if .IsSigned}}
		  <div class="comment form">
		    <a class="avatar" href="{{.SignedUser.HomeLink}}">
		      <img src="{{.SignedUser.AvatarLink}}">
		    </a>
		    <div class="content">
			    <form class="ui segment form" id="comment-form" action="{{.Link}}/comments" method="post">
						{{template "repo/issue/comment_tab" .}}
						{{.CsrfTokenHtml}}
						<input id="status" name="status" type="hidden">
			      <div class="text right">
			      	{{if .IsIssueOwner}}
			      	{{if .Issue.IsClosed}}
							<div id="status-button" class="ui green basic button" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
								{{.i18n.Tr "repo.issues.reopen_issue"}}
							</div>
			      	{{else}}
							<div id="status-button" class="ui red basic button" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
								{{.i18n.Tr "repo.issues.close_issue"}}
							</div>
							{{end}}
							{{end}}
							<button class="ui green button">
								{{.i18n.Tr "repo.issues.create_comment"}}
							</button>
			      </div>
			    </form>
		    </div>
		  </div>
		  {{else}}
		  <div class="ui warning message">
		    <a href="/user/sign_up" class="ui green button">{{.i18n.Tr "repo.issues.sign_up_for_free"}}</a>
		    {{.i18n.Tr "repo.issues.sign_in_require_desc" "/user/login" | Safe}}
		  </div>
		  {{end}}
  	</ui>
	</div>

	<div class="four wide column">
		<div class="ui segment metas">
			<div class="ui {{if not .IsRepositoryAdmin}}disabled{{end}} jump select-label dropdown">
				<span class="text">
					<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
					<span class="octicon octicon-gear"></span>
				</span>
        <div class="filter menu" data-action="update" data-update-url="{{$.RepoLink}}/issues/{{$.Issue.Index}}/label">
        	<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
        	{{range .Labels}}
        	<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon {{if .IsChecked}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
          {{end}}
				</div>
			</div>
			<div class="ui labels list">
				<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_label"}}</span>
      	{{range .Labels}}
      	<a class="{{if not .IsChecked}}hide{{end}} item" id="label_{{.ID}}" href="{{$.RepoLink}}/issues?labels={{.ID}}"><span class="label color" style="background-color: {{.Color}}"></span> <span class="text">{{.Name}}</span></a>
        {{end}}
			</div>

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

			<div class="ui {{if not .IsRepositoryAdmin}}disabled{{end}} jump select-milestone dropdown">
				<span class="text">
					<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
					<span class="octicon octicon-gear"></span>
				</span>
        <div class="menu" data-action="update" data-update-url="{{$.RepoLink}}/issues/{{$.Issue.Index}}/milestone">
        	<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
        	{{if .OpenMilestones}}
        	<div class="divider"></div>
        	<div class="header">
    	      <i class="octicon octicon-milestone"></i>
    	      {{.i18n.Tr "repo.issues.new.open_milestone"}}
    	    </div>
        	{{range .OpenMilestones}}
        	<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
          {{end}}
    	    {{end}}
    	    {{if .ClosedMilestones}}
        	<div class="divider"></div>
        	<div class="header">
    	      <i class="octicon octicon-milestone"></i>
    	      {{.i18n.Tr "repo.issues.new.closed_milestone"}}
    	    </div>
        	{{range .ClosedMilestones}}
        	<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
          {{end}}
        	{{end}}
				</div>
			</div>
			<div class="ui select-milestone list">
				<span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
				<div class="selected">
					{{if .Issue.Milestone}}
					<a class="item" href="{{.RepoLink}}/issues?milestone={{.Issue.Milestone.ID}}"> {{.Issue.Milestone.Name}}</a>
					{{end}}
				</div>
			</div>

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

			<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
			<div class="ui {{if not .IsRepositoryAdmin}}disabled{{end}} jump select-assignee dropdown">
				<span class="text">
					<strong>{{.i18n.Tr "repo.issues.new.assignee"}}</strong>
					<span class="octicon octicon-gear"></span>
				</span>
        <div class="menu" data-action="update" data-update-url="{{$.RepoLink}}/issues/{{$.Issue.Index}}/assignee">
        	<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignee"}}</div>
        	{{range .Assignees}}
        	<div class="item" data-id="{{.Id}}" data-href="{{$.RepoLink}}/issues?assignee={{.Id}}" data-avatar="{{.AvatarLink}}"><img src="{{.AvatarLink}}"> {{.Name}}</div>
          {{end}}
				</div>
			</div>
			<div class="ui select-assignee list">
				<span class="no-select item {{if .Issue.Assignee}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_assignee"}}</span>
				<div class="selected">
					{{if .Issue.Assignee}}
					<a class="item" href="{{$.RepoLink}}/issues?assignee={{.Issue.Assignee.Id}}"><img class="ui avatar image" src="{{.Issue.Assignee.AvatarLink}}"> {{.Issue.Assignee.Name}}</a>
					{{end}}
				</div>
			</div>
		</div>
	</div>
</div>