<rml>
  <head>
    <title>Critterfolio</title>
    <link type="text/rcss" href="styles/main.rcss" />

    <script>
      
    </script>
  </head>

  <body data-model="app_data">
    <div id="header">
      <div class="header-title-group">
        <h1>Critterfolio</h1>
        <!-- <span class="header-tag">Field Registry</span> -->
      </div>
      <button id="new-critter-btn" data-event-click="is_add_critter_dialog_open = true"><div>+</div></button>
    </div>
    

    <!-- Critter Cards / Drawer Rows -->
    <div class="critter-list">
      <button data-for="entry : critters" class="critter-card">
        <div class="critter-card-body">
          <div class="thumb-frame">
            <img class="critter-thumb" src="images/icon.tga" />
          </div>

          <div class="critter-info">
            <div class="critter-card-header">
              <h3 class="critter-name">{{entry.value.name}}</h3>
              <span class="critter-id">#{{entry.key}}</span>
            </div>

            <div class="info-pills">
              <span class="pill"><strong>Sp:</strong> {{entry.value.species}}</span>
              <span class="pill"><strong>Sex:</strong> {{entry.value.gender}}</span>
            </div>
          </div>
        </div>

        <button class="btn-delete" data-event-click="delete_critter(entry.key)">X</button>
      </button>
    </div>

    <!-- Modals -->
    <div class="modal-overlay" data-visible="is_add_critter_dialog_open">
      <div class="modal-content">
        <div class="modal-header">
          <h2>Add New Critter</h2>
        </div>
        <div class="modal-body">
          <p class="error" data-visible="error_message != ''">{{error_message}}</p>
          <div class="form-group"><label>Name:</label><input type="text" data-value="new_critter_form.name" /></div>
          <div class="form-row">
            <div class="form-group half"><label>Species:</label><input type="text" data-value="new_critter_form.species" /></div>
            <div class="form-group half"><label>Gender (M/F):</label><input type="text" data-value="new_critter_form.gender" /></div>
          </div>
          <div class="form-row">
            <div class="form-group half"><label>Mother ID (Optional):</label><input type="text" data-value="new_critter_form.mother_id" /></div>
            <div class="form-group half"><label>Father ID (Optional):</label><input type="text" data-value="new_critter_form.father_id" /></div>
          </div>
          <div class="form-group"><label>Notes:</label><textarea data-value="new_critter_form.notes"></textarea></div>
        </div>
        <div class="modal-buttons">
          <button class="btn-cancel" data-event-click="is_add_critter_dialog_open = false">Cancel</button>
          <button class="btn-submit" data-event-click="submit_add_critter">Save</button>
        </div>
      </div>
    </div>

    <div class="modal-overlay" data-visible="is_confirmation_dialog_open">
      <div class="modal-content modal-content-small">
        <div class="modal-header"><h2>Confirmation</h2></div>
        <div class="modal-body"><p class="dialog-text">{{confirmation_dialog_text}}</p></div>
        <div class="modal-buttons">
          <button class="btn-cancel" data-event-click="confirm_dialog_no">Cancel</button>
          <button class="btn-submit" data-event-click="confirm_dialog_yes">Yes</button>
        </div>
      </div>
    </div>
  </body>
</rml>