{% extends 'layout.twig' %}

{% block title %}Editing Component: {{ component.name }}{% endblock %}

{% block content %}

<div class="row mb-4">
  <div class="col-12">
    <h1>Editing Component: {{ component.name }}</h1>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <form action="{{ url_for('component.edit', { component_id: component.id }) }}" method="POST" class="u-full-width">
      <div class="row mb-3">
        <div class="col-9">
          <label class="form-label" for="component_name">Component name:</label>
          <input id="component_name" class="form-control" type="text" name="component_name" value="{{ component.name }}">
        </div>

        <div class="col-3">
          <label class="form-label" for="component_type">Component type:</label>
          <select id="component_type" class="form-select" name="component_type">
            <option value="gpu" {% if component.type == 'gpu' %}selected{% endif %}>Graphics card</option>
            <option value="cpu" {% if component.type == 'cpu' %}selected{% endif %}>Processor</option>
          </select>
        </div>
      </div>

      <input class="btn btn-primary" type="submit" value="Submit Changes">
    </form>
  </div>
</div>

{% endblock %}