<jskom:loading ng-hide="conf"></jskom:loading>

<div ng-show="conf" ng-cloak>
  <h2>{{ conf|confType }}: {{ conf | confTitle }}</h2>

  <div class="row">
    <div class="twelve columns">
      <div class="button-bar">
        <ul class="button-group">
          <li>
            <a href="/conferences/{{conf.conf_no}}/texts/new" class="secondary button">
              <i class="icon-pencil"></i> New text...
            </a>
          </li>
          
          <li>
            <a href="/conferences/{{conf.conf_no}}/set-unread" class="secondary button">
              Set unread...
            </a>
          </li>
        </ul>
        
        <ul class="button-group">
          <li>
            <a href="/conferences/{{conf.conf_no}}/texts/latest/" class="secondary button">
              Latest texts...
            </a>
          </li>
        </ul>
        
        <ul class="button-group">
          <li>
            <button class="secondary button"
                    ng-disabled="!membership || isLeaving || isJoining" ng-click="leaveConf()">
              Leave
            </button>
          </li>
          <li>
            <button class="secondary button"
                    ng-disabled="membership || isLeaving || isJoining" ng-click="joinConf()">
              Join
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="twelve columns">
      <dl class="tabs">
        <dd ng-class="isTabActive('presentation')">
          <a ng-click="selectTab('presentation')">Presentation</a>
        </dd>
        <dd ng-class="isTabActive('details')">
          <a ng-click="selectTab('details')">Details</a>
        </dd>
        <dd ng-class="isTabActive('membership')" ng-hide="isLoadingMembership">
          <a ng-click="selectTab('membership')">Membership</a>
        </dd>
      </dl>
      
      <ul class="tabs-content">
        
        <li ng-class="isTabActive('presentation')">
          <ng-switch on="conf.presentation">
            <div ng-switch-default>
              <jskom:loading ng-show="isLoadingPresentation"></jskom:loading>
              <div ng-show="text">
                <ng-include src="'text.html'|jskomTemplate"></ng-include>
              </div>
            </div>
            <div ng-switch-when="0">
              <em>{{ conf.name }} has no presentation.</em>
            </div>
          </ng-switch>
        </li>
        
        <li ng-class="isTabActive('details')">
          <table class="twelve">
            <tr>
              <td>Conference number</td>
              <td>{{conf.conf_no}}</td>
            </tr>
            <tr>
              <td>Creation time</td>
              <td>{{conf.creation_time | dateString }}</td>
            </tr>
            <tr>
              <td>Creator</td>
              <td>{{conf.creator|personName}}</td>
            </tr>
            <tr>
              <td>Supervisor</td>
              <td>{{conf.supervisor|confName}}</td>
            </tr>
            <tr>
              <td>Presentation</td>
              <td>
                <span ng-switch="conf.presentation">
                  <jskom:a text-no="{{ conf.presentation }}" ng-switch-default>
                    {{ conf.presentation }}
                  </jskom:a>
                  <em ng-switch-when="0">No presentation</em>
                </span>
              </td>
            </tr> 
            <tr>
              <td>Number of members</td>
              <td>{{conf.no_of_members}}</td>
            </tr>
            <tr>
              <td>Number of texts</td>
              <td>{{conf.no_of_texts}}</td>
            </tr>
            <tr>
              <td>Last written</td>
              <td>{{conf.last_written | dateString }}</td>
            </tr>
            <tr>
              <td>Closed</td>
              <td>{{conf.type.rd_prot}}</td>
            </tr>
            <tr>
              <td>FAQ</td>
              <td>
                <span ng-repeat="auxitem in conf.aux_items|auxitemtag:'faq-text'">
                  <jskom:a text-no="{{auxitem.data}}">{{auxitem.data}}</jskom:a>
                </span>
              </td>
            </tr>
          </table>
        </li>
        
        <li ng-class="isTabActive('membership')">
          <jskom:loading ng-show="isLoadingMembership"></jskom:loading>
          <div ng-hide="isLoadingMembership">
            
            <div class="row">
              <div class="twelve columns">
                <span>
                  <em ng-show="membership">You are a member of this conference.</em>
                  <em ng-hide="membership">You are not a member of this conference.</em>
                </span>
              </div>
            </div>
            
            <table class="twelve" ng-show="membership">
              <tbody>
                <tr>
                  <td>Joined</td>
                  <td>{{membership.added_at | dateString }}</td>
                </tr>
                <tr>
                  <td>Last time read</td>
                  <td>{{membership.last_time_read | dateString }}</td>
                </tr>
                <tr>
                  <td>Priority</td>
                  <td>{{membership.priority}}</td>
                </tr>
                <tr>
                  <td>Passive member</td>
                  <td>{{membership.type.passive}}</td>
                </tr>
                <tr>
                  <td>Secret member</td>
                  <td>{{membership.type.secret}}</td>
                </tr>
                <tr ng-hide="membership.added_by.pers_no == session.person.pers_no">
                  <td>Added by</td>
                  <td>{{membership.added_by|personName}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div id="jskomControlBar">
  </div>
</div>
