{% extends "base.j2" -%}

{%- block call_to_action -%}
{%- endblock call_to_action -%}

{% block content -%}

<section class="one-column">
  <section class="product-title-and-description well">
    <h3>New Product</h3>
    <br/>
  
    Creating a new product in the shop named "{{ request.shop.name }}".
  
    <br/>
    <br/>
  
    <form method="post" action="/p/new" onsubmit="this.querySelector('input[type=submit]').style.display = 'none'; return true;">

      <br/>

      <span class="asterisk">*</span> required

      <br/>

      <input type="hidden" name="shop_id" value="{{ request.shop.id }}" />
  
      <br/>
      <label for="title_input">Product Title <span class="asterisk">*</span></label>
      <input
          name        = "title"
          type        = "text"
          id          = "title_input"
          class       = "mps-product-title"
          value       = "{{ title }}"
          placeholder = "Product Title"
          required />
  
      <br />
      <br />
  
      <label for="description_input">Product Description <span class="asterisk">*</span></label>
      <textarea
          name        = "description"
          id          = "description_input"
          class       = "mps-product-description"
          placeholder = "Product Description"
          required>{{ description }}</textarea>
  
      <br />
      <br />
  
      <label for="price_input">Product Price <span class="asterisk">*</span></label>
      <input
          name        = "price"
          type        = "text"
          id          = "price_input"
          class       = "mps-product-price"
          value       = "{{ price }}"
          placeholder = "Product Price"
          required />

      <br />
      <br />
 
      <label for="is_bundle_input">Product Bundle?</label>
      <input type="checkbox" name="is_bundle" id="is_bundle_input" {% if is_bundle %}checked{% endif %}> If checked, this product will bundle other existing products.
      <br>(playlist, gallery, album, collection, series, etc.)

      <br />
      <br />

      <label>Product Type <span class="asterisk">*</span></label>
      <div class="radio-group">
        <input type="radio" id="digital" name="is_physical" value="false" {% if not is_physical %}checked{% endif %}>
        <label for="digital">Digital</label>
        {% if shop_has_locations %}
        <input type="radio" id="physical" name="is_physical" value="true" {% if is_physical %}checked{% endif %}>
        <label for="physical">Physical</label>
        {% else %}
        <input type="radio" id="physical" name="is_physical" value="true" disabled>
        <label for="physical">Physical (Add a <a href="{{ create_location_url }}">location</a> first)</label>
        {% endif %}
      </div>

      <br />
      <br />

      <input type="hidden" name="is_sellable" id="is_sellable_input" value="on" required />
      <input type="submit" name="submit" class="mps-submit" value="Continue" />
    </form>
  </section>
</section>

<style>
.radio-group {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
}

.radio-group label {
    margin-right: 15px;
}
</style>

{%- endblock -%}
