import Downloads from './Downloads.js';
import GetCopy from './GetCopy.js';

export default {
    components: { Downloads, GetCopy },
    props: [ 'cluster', 'token', 'state' ],
    template: `
<div class="cluster">
  <div class="title">Cluster {{ cluster.Name }}</div>
  <div class="section">Tokens</div>
  <section class="links">
    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
  </section>
  <div class="section">Passwords</div>
  <section class="links">
    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
  </section>
  <div class="section">Downloads</div>
  <section class="downloads">
    <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
  </section>
  <div class="section">CAs</div>
  <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
  <tr v-for="ca in cluster.CAs">
    <td>{{ ca.Name }}</td>
    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
    <td><template v-for="signed in ca.Signed">
      {{" "}}
      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
    </template></td>
  </tr></table>
</div>
`
}