{%extends "publications/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}

{%block title%}View Publication{%endblock%}

{%block breadcrumbs%}
{{super()}}
<li class="breadcrumb-item">
  <a href="{{url_for('publications.create_publication', **get_args)}}"
     title="Manage publications">create publication</a>
</li>
{%endblock%}


{%block contents%}
{{flash_all_messages()}}

<div class="row">
  <form id="frm-create-publication"
        method="POST"
        action="{{url_for('publications.create_publication', **get_args)}}"
        class="form-horizontal">

    <div class="row mb-3">
      <label for="txt-pubmed-id" class="col-sm-2 col-form-label">
        PubMed ID</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input type="text"
                 id="txt-pubmed-id"
                 name="pubmed-id"
                 class="form-control"/>
          <div class="input-group-text">
            <button class="btn btn-outline-primary"
                    id="btn-search-pubmed-id">search</button>
          </div>
        </div>
        <span id="search-pubmed-id-error"
              class="form-text text-muted text-danger visually-hidden">
        </span>
        <span class="form-text text-muted">This is the publication's ID on
          <a href="https://pubmed.ncbi.nlm.nih.gov/"
             title="Link to NCBI's PubMed service">NCBI's Pubmed Service</a>
        </span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="txt-publication-title" class="col-sm-2 col-form-label">
        Title</label>
      <div class="col-sm-10">
        <input type="text"
               id="txt-publication-title"
               name="publication-title"
               class="form-control" />
        <span class="form-text text-muted">Provide the publication's title here.</span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="txt-publication-authors" class="col-sm-2 col-form-label">
        Authors</label>
      <div class="col-sm-10">
        <input type="text"
               id="txt-publication-authors"
               name="publication-authors"
               required="required"
               class="form-control" />
        <span class="form-text text-muted">
          A publication <strong>MUST</strong> have an author. You <em>must</em>
          provide a value for the authors field.
        </span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="txt-publication-journal" class="col-sm-2 col-form-label">
        Journal</label>
      <div class="col-sm-10">
        <input type="text"
               id="txt-publication-journal"
               name="publication-journal"
               class="form-control" />
        <span class="form-text text-muted">Provide the name journal where the
          publication was done, here.</span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="select-publication-month"
             class="col-sm-2 col-form-label">
        Month</label>
      <div class="col-sm-4">
        <select class="form-control"
                id="select-publication-month"
                name="publication-month">
          <option value="">Select a month</option>
          <option value="january">January</option>
          <option value="february">February</option>
          <option value="march">March</option>
          <option value="april">April</option>
          <option value="may">May</option>
          <option value="june">June</option>
          <option value="july">July</option>
          <option value="august">August</option>
          <option value="september">September</option>
          <option value="october">October</option>
          <option value="november">November</option>
          <option value="december">December</option>
        </select>
        <span class="form-text text-muted">Month of publication</span>
      </div>

      <label for="txt-publication-year"
             class="col-sm-2 col-form-label">
        Year</label>
      <div class="col-sm-4">
        <input type="number"
               id="txt-publication-year"
               name="publication-year"
               class="form-control"
               min="1960" />
        <span class="form-text text-muted">Year of publication</span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="txt-publication-volume"
             class="col-sm-2 col-form-label">
        Volume</label>
      <div class="col-sm-4">
        <input type="text"
               id="txt-publication-volume"
               name="publication-volume"
               class="form-control">
        <span class="form-text text-muted">Journal volume</span>
      </div>

      <label for="txt-publication-pages"
             class="col-sm-2 col-form-label">
        Pages</label>
      <div class="col-sm-4">
        <input type="text"
               id="txt-publication-pages"
               name="publication-pages"
               class="form-control" />
        <span class="form-text text-muted">Journal pages for the publication</span>
      </div>
    </div>

    <div class="row mb-3">
      <label for="txt-abstract" class="col-sm-2 col-form-label">Abstract</label>
      <div class="col-sm-10">
        <textarea id="txt-publication-abstract"
                  name="publication-abstract"
                  class="form-control"
                  rows="7"></textarea>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <input type="submit"
               class="btn btn-primary"
               value="create publication" />
      </div>
      <div class="col">
        <input type="reset" class="btn btn-danger" value="reset form" />
      </div>
    </div>

</form>
</div>

{%endblock%}


{%block javascript%}
<script type="text/javascript" src="/static/js/pubmed.js"></script>
<script type="text/javascript">
  $(function() {
      $("#btn-search-pubmed-id").on("click", (event) => {
          event.preventDefault();
          var search_button = event.target;
          var pubmed_id = $("#txt-pubmed-id").val().trim();
          remove_class($("#txt-pubmed-id").parent(), "has-error");
          if(pubmed_id == "") {
              add_class($("#txt-pubmed-id").parent(), "has-error");
              return false;
          }

          search_button.disabled = true;
          // Fetch publication details
          fetch_publication_details(pubmed_id,
                                    [() => {search_button.disabled = false;}]);
          return false;
      });
  });
</script>
{%endblock%}