﻿<voice>
  <div class="card fit lighten-5">
    <div class="card-image">
      <a href="#{id}" onclick={onclick}><img src={src} alt={name}></a>
    </div>
	    <div class="card-content">
	      <h3>{name}</h3>
	      <p>{group}</p>
	      <p>{year}年度入社</p>
	      <p><a class="btn waves-light waves-effect blue" href="#{id}" onclick={onclick}>開く</a></p>
	    </div>
    </div>
   
  <voice-modal class="modal white" id={id} name={name} texts={texts} group={group} year={year}></voice-modal>
  
  <style scoped>
    .hoge{
      padding-top:10px;
	  object-fit: cover;
      width: 80%;
      height: 80%;
    }
    
    :scope .modal .modal-content {
      padding: 0;
    }
  
    :scope .modal {
      width: 80%;
    }
  
    :scope .card.fit .card-image{
      position: relative;
      height: 165px;
      border-bottom: 1px solid rgba(204,204,204,0.5);
    }
    :scope .card.fit .card-image img {
      height: 100%;
      width: auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  
  this.id = encodeURI(opts.name).replace(/%/g , '');    
  this.name = opts.name;
  this.src = opts.src;
  this.group = opts.group;
  this.year = opts.year;
  this.texts = opts.texts;
  this.textClass = opts.textClass || 'col s12 m6 l8';
  this.cardClass = opts.cardClass || 'col s12 m6 l4';
  
  this.onclick = function(e){
    location.hash = this.id;
    $('#' + this.id).openModal({complete:function(){location.hash = 'all';}});
  };

</voice>

<voice-modal>
  <div class="modal-content">
    <div class={cardClass}>
      <div class="card grey lighten-5 z-depth-0">
        <div class="card-image">
          <img src={src} alt={name}>
        </div>
        <div style="display:flex; justify-content: flex-start;">
        <div class="card-content">
          <h3>{name}</h3>
          <p>{group}</p>
          <p>{year}年度入社</p>
        </div>
        <div style="width:25%;  ">
	      <a  href="#{id}" ><img class="hoge" src={src2} alt='' onerror="this.onerror = null; this.src='';"></a>
	    </div>
	   </div>
      </div>
    </div>
    <div class={"article-text " + textClass}>
      <p each={text in texts}>{text}</p>
      <p><buttom class="btn blue" onclick={close} type="button">閉じる</buttom></p>
    </div>
  </div>
  
  this.close = function(){
    $('#' + this.root.id).closeModal(this.complete);
  };
  this.open = function(){
    $('#' + this.root.id).openModal(this.complete);
  };
  
  this.complete = {complete:function(){location.hash='all';}};
  
  this.onclick = function(){
    location.hash = this.root.id;
    this.open();
  };
  this.name = opts.name;
  this.src = opts.src;
  this.group = opts.group;
  this.year = opts.year;
  this.texts = opts.texts;
  this.textClass = opts.textClass || 'col s12 m6 l6';
  this.cardClass = opts.cardClass || 'col s12 m6 l6';
  
  this.on('mount', function(){
    if(this.root.id === location.hash.substring(1)){
      this.open();
    }
  });

</voice-modal>