         {
           {$shipTypes, _ships} = window
           for shipData, j in @state.ships
-            <div key={j} className="ship-item">
-              <div className="ship-tile">
-                <div className="ship-basic-item">
-                  <div className="ship-info" style={getStatusStyle @state.label[j]}>
-                    <div className="ship-basic">
-                      <span className="ship-lv">
-                        Lv. {shipData.lv}
-                      </span>
-                      <span className='ship-type'>
-                        {i18n.resources.__ shipData.type}
-                      </span>
-                    </div>
-                    <span className="ship-name">
-                      {i18n.resources.__ shipData.name}
-                    </span>
-                    <span className="ship-exp">
-                      Next. {shipData.nextEXP}
-                    </span>
-                  </div>
-                  {
-                    shipStat =
-                      <div className="ship-stat">
-                        <div className="div-row">
-                          <span className="ship-hp" style={getStatusStyle @state.label[j]}>
-                            {shipData.nowHp} / {shipData.maxHp}
-                          </span>
-                          <div className="status-label">
-                            <StatusLabel label={@state.label[j]}/>
-                          </div>
-                          <div style={getStatusStyle @state.label[j]}>
-                            <span className={"ship-cond " + window.getCondStyle(shipData.cond)}>
-                              ★{shipData.cond}
-                            </span>
-                          </div>
-                        </div>
-                        <span className="hp-progress top-space" style={getStatusStyle @state.label[j]}>
-                          <ProgressBar bsStyle={getHpStyle shipData.nowHp / shipData.maxHp * 100}
-                                       now={shipData.nowHp / shipData.maxHp * 100} />
-                        </span>
-                      </div>
-                    if shipData.ndockTime
-                      <OverlayTrigger show = {shipData.ndockTime} placement='right' overlay={
-                                      <Tooltip id="panebody-repair-time-#{@props.key}-#{j}">
-                                        {__ 'Repair Time'}: {resolveTime shipData.ndockTime / 1000}
-                                      </Tooltip>}>
-                        {shipStat}
-                      </OverlayTrigger>
-                    else
-                      shipStat
-                  }
-                </div>
-              </div>
-              <span className="ship-fb" style={getStatusStyle @state.label[j]}>
-                <span style={flex: 1}>
-                  <OverlayTrigger placement='right' overlay={<Tooltip id="panebody-fuel-#{@props.key}-#{j}">{shipData.nowFeul} / {shipData.maxFeul}</Tooltip>}>
-                    <ProgressBar bsStyle={getMaterialStyle shipData.fuelStatus}
-                                 now={shipData.fuelStatus} />
-                  </OverlayTrigger>
-                </span>
-                <span style={flex: 1}>
-                  <OverlayTrigger placement='right' overlay={<Tooltip id="panebody-bull-#{@props.key}-#{j}">{shipData.nowBull} / {shipData.maxBull}</Tooltip>}>
-                    <ProgressBar bsStyle={getMaterialStyle shipData.bullStatus}
-                                 now={shipData.bullStatus} />
-                  </OverlayTrigger>
-                </span>
-              </span>
-              <div className="ship-slot" style={getStatusStyle @state.label[j]}>
-                <Slotitems key={j} fleet={@props.deckIndex} slots={shipData.slotItems}/>
-              </div>
-            </div>
+            <ShipRow
+              key={shipData.id}
+              label={@state.label[j]}
+              shipData={shipData}
+              deckIndex={@props.deckIndex}
+              shipIndex={j}
+            />
         }
       </div>
     </div>

        id: itemId
        onslot: ship.api_onslot[i]
        maxeq: ship.api_maxeq[i]

PaneBody = React.createClass
  condDynamicUpdateFlag: false

    {$ships, $shipTypes, _ships} = window
    ship = _ships[shipId]
    shipInfo = $ships[ship.api_ship_id]
    @id = shipId
    @type = $shipTypes[shipInfo.api_stype].api_name
    @name = shipInfo.api_name
    @lv = ship.api_lv
