<div class="columns">
  <div class="column">
    <section class="section">
      <div class="columns">
        <div class="column is-one-quarter">
          <aside class="menu">
            <p class="menu-label">Actions</p>
            <ul class="menu-list">
              <li><a (click)="togglePluginModal()">Add Plugin</a></li>
              <li><a (click)="toggleCategoryModal()">Add Category</a></li>
            </ul>
            <p class="menu-label">Categories Filter</p>
            <ul class="menu-list">
              <li>
                <a
                  [ngClass]="{'is-active': (categoryFilter | async) === undefined }"
                  (click)="changeCategoryFilter(undefined)"
                >
                  All
                </a>
              </li>
              <li *ngFor="let category of (categories | async); let i = index">
                <a
                  [ngClass]="{'is-active': (categoryFilter | async) === category.name }"
                  (click)="changeCategoryFilter(category.id)"
                >{{ category.name }}</a>
              </li>
            </ul>
          </aside>
        </div>
        <div class="column">
          <div class="container is-fluid">
            <div class="table-container">
              <table class="table is-hoverable is-narrow">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th><abbr title="Github Url">Github</abbr></th>
                    <th>Language</th>
                    <th>Category</th>
                    <th></th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let plugin of plugins | async">
                    <td>{{ plugin.name }}</td>
                    <td>{{ plugin.description }}</td>
                    <td>
                      <a [href]="plugin.githubUrl">{{ plugin.githubUrl }}</a>
                    </td>
                    <td>{{ plugin.language?.name }}</td>
                    <td>{{ plugin.category?.name }}</td>
                    <td>
                      <button class="button is-info">Update</button>
                    </td>
                    <td>
                      <button class="button is-danger">Delete</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<div class="modal" id="pluginModal" #pluginModal>
  <div class="modal-background" (click)="togglePluginModal()"></div>
  <div class="modal-content has-background-white p-3 m-3">
    <div class="modal-card">
      <form class="form"
        [formGroup]="createPluginForm"
        (ngSubmit)="createPlugin()"
      >
        <header class="modal-card-head">
          <p class="modal-card-title" id="pluginModalTitle">Plugin</p>
          <button class="delete" aria-label="close" (click)="createPluginForm.reset(); togglePluginModal()"></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label class="label">Name</label>
            <div class="control">
              <input class="input"
                type="text"
                id="pluginModalName"
                placeholder="Plugin Name"
                formControlName="name"
              />
            </div>
          </div>
          <div class="field">
            <label class="label">Github URL</label>
            <div class="control">
              <input class="input"
                type="text"
                id="pluginModalGithubURL"
                placeholder="Github URL"
                formControlName="githubUrl"
              />
            </div>
          </div>
          <div class="field">
            <label class="label">Plugin Description</label>
            <div class="control">
              <textarea class="textarea"
                id="pluginModalDescription"
                placeholder="Plugin Description"
                formControlName="description"
              ></textarea>
            </div>
          </div>
          <div class="field">
            <label class="label">Language</label>
            <div class="select">
              <select formControlName="language">
                <option *ngFor="let language of (languages | async)" [value]="language.id">{{ language.name }}</option>
              </select>
            </div>
          </div>
          <div class="field">
            <label class="label">Category</label>
            <div class="select">
              <select id="CategoryId" formControlName="category">
                <option *ngFor="let category of (categories | async)" [value]="category.id" ><a>{{ category.name }}</a></option>
              </select>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button type="submit"
            class="button is-normal is-responsive is-link"
          >
            Save
          </button>
          <button class="button is-normal is-responsive is-danger" (click)="createPluginForm.reset(); togglePluginModal()">
            Cancel
          </button>
        </footer>
      </form>
    </div>
  </div>
</div>

<div class="modal" id="categoryModal" #categoryModal>
  <div class="modal-background" (click)="toggleCategoryModal()"></div>
  <div class="modal-card">
    <form [formGroup]="createCategoryForm" (ngSubmit)="createCategory()">
      <header class="modal-card-head">
        <p class="modal-card-title">Category</p>
        <button class="delete" aria-label="close" (click)="createCategoryForm.reset(); toggleCategoryModal()"></button>
      </header>
      <section class="modal-card-body">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input"
              type="text"
              placeholder="Category Name"
              id="categoryModalName"
              formControlName="name"
            />
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button type="submit"
          class="button is-normal is-responsive is-link is-rounded">
          Save
        </button>
        <button class="button is-normal is-rounded" (click)="createCategoryForm.reset(); toggleCategoryModal()">
          Cancel
        </button>
      </footer>
    </form>
  </div>
</div>
