import moment from "moment"

<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
  <if(state.imported == null)>
    <h1>Import Log</h1>

    <p key="error" class="color-error">${state.error}</p>

    <label>Type</label>
    <select key="importer" autofocus class="big" placeholder="Kind" on-change("change", "importer") value=state.values.importer>
      <option value="MircLike" selected=(state.values.importer === "MircLike")>mIRC-Like log</option>
      <option value="ForumLog" selected=(state.values.importer === "ForumLog")>Forum Log</option>
    </select>

    <label>Timezone</label>
    <select key="timezone" class="big" placeholder="Kind" on-change("change", "timezone") value=state.values.timezone>
      <option for(tz in state.timezones) value=tz selected=(state.values.timezone === tz)>${tz}</option>
    </select>

    <label>Channel</label>
    <input key="channelName" placeholder="(Required)" class="big" on-change("change", "channelName") value=state.values.channelName />

    <if(state.values.importer === "MircLike")>
      <label>Date</label>
      <input key="date" class="big" placeholder="(Required)" on-change("change", "date") value=state.values.date />
    </if>

    <label>Content</label>
    <textarea key="data" placeholder="(Required)" class="tall" on-change("change", "data") value=state.values.data />

    <button disabled=state.loading on-click("save")>Import</button>
  </if>
  <else>
    <h1>Import Successful</h1>

    <p>The following logs were imported.</p>

    <ol class="imported-log-list">
      <for (log in state.imported)>
        <li><a class="color-primary" href=("/logs/" + log.id)>${log.id} (${moment(log.date).format("MMMM D, YYYY")})</a></li>
      </for>
    </ol>
  </else>
</modal>